[英]How to make responsive popup div?
基本上我的网站是自适应的,但下面是我的弹出式div div的代码在桌面上可以正常工作,但在移动人像上它只是超出了屏幕,我还需要使此div自适应。 另外,我希望该div以淡入或其他动画形式出现在屏幕上,这是我现在不知道如何使用。 请帮助
HTML在这里:
<section id="html" class="content-section text-center">
<div class="download-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h2>HTML Tutorials</h2>
<p></p>
<a href="javascript:void(0)" class="btn btn-default btn-lg" onclick="toggle_visibility('popupBoxHTML');">More HTML Tutorials</a>
<div id="popupBoxHTML">
<div class="popupBoxWrapper">
<div class="popupBoxContent">
<h3>HTML</h3>
<p>You are currently viewing HTML Box.</p>
<p>Click <a href="javascript:void(0)" onclick="toggle_visibility('popupBoxHTML');">here</a> to close popup box one. </p>
</div>
</div>
</div>
</div>
</div>
</section>
CSS在这里:
#popupBoxOnePosition, #popupBoxHTML{
margin:10px 0 0 0;
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
background:#333;
display: none;
opacity:.95;
z-index:100;
widows:50%;
}
.popupBoxWrapper{
width: 550px;
margin:
50px auto;
text-align: left;
}
.popupBoxContent{
background-color:
#000;
padding:
15px;
opacity:1;
border-radius:15px;
-o-box-shadow:0 0 50px ##219ab3;
-moz-box-shadow:0 0 50px ##219ab3;
-webkit-box-shadow:0 0 50px ##219ab3;
-ms-box-shadow:0 0 50px ##219ab3;
transition:ease-in;
transition-delay:1s;
-webkit-transition:ease-in;
}
此处的javascript:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
您需要添加媒体查询以使其响应。
@media only screen and (max-width: 600px) {
.popupBoxWrapper{
width:100%;
}
}
当屏幕宽度低于600px时,此CSS将使弹出窗口的宽度变为100%,而不是固定的550px。 因此,这将使div适合屏幕。
无需CSS媒体查询。
只需将您的CSS更改为关注。 将width:550px更新为max-width:550px并添加width:95%; 当屏幕小于550像素时,剩下的5%宽度会为您带来弹出窗口的外观。
.popupBoxWrapper{
max-width: 550px;
width: 95%;
margin:
50px auto;
text-align: left;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.