[英]How to make this popup responsive with different screen size
我正在使用CSS和HTML彈出消息。 我試圖使彈出窗口的布局更具響應性,但由於我對CSS的了解有限,所以我被卡住了。 基本上,我不想強制使用固定像素的div
。 另外,我的Button
和Anchor url
也使用CSS中的修復位置進行了硬編碼。 我該如何改善呢?
當彈出窗口顯示時,我想將其后面的頁面塗成灰色。 但是,它似乎可以在jsfiddle中工作,但是當我將其放在我的網頁上時,在彈出窗口顯示時,我只看到頁面的一半是灰色的。 如何使整個頁面變灰?
請參閱此處: http : //jsfiddle.net/chs9x9wj/274/
彈出窗口將如下所示:
CSS:
div.outer {
position: relative;
width: 300px;
height: 270px;
border: 3px solid black;
text-align: center;
margin:auto;
z-index: 100;
background-color: yellow;
}
div.outer a {
color: blue;
}
div.inner-right {
position: absolute;
top: 80px;
right: 10px;
width: 240px;
height: 100px;
/*border: 3px solid blue;*/
text-align: left;
}
div.inner-left {
position: absolute;
top: 80px;
left: 10px;
width: 20px;
height: 100px;
/*border: 3px solid red;*/
color: red;
}
div.inner-buttom {
position: absolute;
top: 180px;
left: 120px;
text-align: center;
}
.prompt-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: black;
opacity: .8;
z-index: 99;
}
HTML:
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Show me the Pop Up</button>
<div class="prompt-backdrop" id="backdrop" style="visibility: hidden"></div>
<br/>
<div class="outer" id="myPopup" style="visibility: hidden">
<a>!</a>
<br/><br/>
<a>This div element has position: relative</a>
<div class="inner-right">
This is a fact: <br/> <br/>
The human eye can distinguish about 10 million different colors.
</div>
<div class="inner-left">
!
</div>
<div class="inner-buttom">
<input type="submit" class="like" value="Next" />
<p><a href="google.com">Go Back</a></p>
</div>
</div>
</body>
</html>
JavaScript:
function myFunction() {
document.getElementById("myPopup").style.visibility = "visible";
document.getElementById("backdrop").style.visibility = "visible";
}
在CSS中使用max-width
是在屏幕變max-width
不使用媒體查詢的情況下動態縮放元素的簡便方法。
如果要使底部鏈接居中,則可以定義寬度,例如。 width: 100px;
, left: 50%;
將元素移動到父元素的一半,然后margin-left: -50px;
(或寬度寬度的負一半)以居中。
這是一個小提琴,其中進行了一些更改以幫助您入門: http : //jsfiddle.net/chs9x9wj/281/
我刪除了一些絕對值,浮動並填充了左和右內部div,並允許按鈕層疊。
“灰色”的背景取決於其背后的淺色背景,以顯示99%的不透明度,也許未變灰的背景具有較暗的背景。
CSS:
div.outer {
-ms-transform: translate(0px, 50%); /* IE 9 */
-webkit-transform: translate(0px, 50%); /* Safari */
transform: translate(0px, 50%);
position: relative;
width: 300px;
height: 270px;
border: 3px solid black;
text-align: center;
margin: auto;
z-index: 100;
background-color: yellow;
}
div.outer a {
color: blue;
}
div.inner-right {
padding-right: 10px;
float: right;
width: 240px;
height: 100px;
text-align: left;
}
div.inner-left {
padding-left: 5px;
float: left;
width: 20px;
height: 100px;
color: red;
}
div.inner-button {
text-align: center;
}
.prompt-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: black;
opacity: .8;
z-index: 99;
}
的HTML:
<!DOCTYPE html>
<html>
<body>
<body>
<button onclick="myFunction()">Show me the Pop Up</button>
<div class="prompt-backdrop" id="backdrop" style="visibility: hidden"></div>
<br/>
<div class="outer" id="myPopup" style="visibility: hidden">
<a>!</a>
<br><br>
<a>This div element has position: relative</a>
<br><br>
<div class="inner-right">
This is a fact: <br/> <br/>
The human eye can distinguish about 10 million different colors.
</div>
<div class="inner-left">
!
</div>
<div class="inner-button">
<input type="submit" class="like" value="Next" />
<p><a href="https://www.google.com">Go Back</a></p>
</div>
</div>
</body>
</html>
js: 不變
http://jsfiddle.net/9x6v74sb/22/
如果可以使用Flexbox,我建議您使用類似的方法。
您可能應該添加一個
document.getElementById("back").onclick = function(e){
e.preventDefault();
document.getElementById("overlay").className = "";
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.