javascript 如何制作响应式弹出div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28239277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make responsive popup div?
提问by user3615189
Basically my website is Responsive but below is the code for my popup div div is working good on desktop but on mobile portrait it just goes out of the screen, I need to make this div responsive also. additionally i want this div to appear on screen with fadein or other animation which is i dont know how to use now. plz help
基本上我的网站是响应式的，但下面是我的弹出式 div div 的代码在桌面上运行良好，但在移动设备上它只是从屏幕上消失，我还需要使这个 div 响应式。另外我希望这个 div 出现在屏幕上，带有淡入淡出或其他动画，我现在不知道如何使用。请帮忙
HTML is here:
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 Here:
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 here:
javascript在这里：
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
采纳答案by theHarsh
You'll need to add media query to make it responsive.
您需要添加媒体查询以使其具有响应性。
@media only screen and (max-width: 600px) {
.popupBoxWrapper{
width:100%;
}
}
When screen-width goes below 600px, this css will make the width of popup 100% instead of fixed 550px. So this will make the div fit to the screen.
当 screen-width 低于 600px 时，这个 css 将使 popup 的宽度变为 100% 而不是固定的 550px。所以这将使 div 适合屏幕。
回答by RajivRisi
No need css media query.
不需要 css 媒体查询。
Simply change your css to following. Update width:550px to max-width:550px and add width:95%; Remaining 5% width give you look and feel as popup when screen less than 550px.
只需将您的 css 更改为以下内容即可。将 width:550px 更新为 max-width:550px 并添加 width:95%；当屏幕小于 550 像素时，剩余 5% 的宽度会让你看起来和感觉像弹出窗口。
.popupBoxWrapper{
max-width: 550px;
width: 95%;
margin:
50px auto;
text-align: left;
}
回答by Timeless
or
或者
Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking.
扁平、响应式、轻量级、易于定制的模态窗口插件，具有声明性状态符号和哈希跟踪。
