如何使此弹出窗口响应不同的屏幕大小
如何使此弹出窗口响应不同的屏幕大小
提问于 2018-07-31 02:15:41
我正在用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";
}回答 2
Stack Overflow用户
发布于 2018-07-31 03:18:54
在CSS中使用max-width是一种在屏幕变小时动态缩放元素的简单方法，无需使用媒体查询。
如果你想让底部的链接居中，你可以定义一个宽度，例如。width: 100px;，设置left: 50%;将元素移动到父元素的中间位置，然后设置margin-left: -50px; (或宽度的负一半)以便居中。
这里有一些可以帮助您入门的更改：http://jsfiddle.net/chs9x9wj/281/
Stack Overflow用户
发布于 2018-07-31 03:31:36
http://jsfiddle.net/9x6v74sb/22/
如果你可以使用Flexbox，我推荐一些类似的东西。
您可能应该添加一个
document.getElementById("back").onclick = function(e){
e.preventDefault();
document.getElementById("overlay").className = "";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51600010
复制相关文章
相似问题
腾讯云开发者
