如何制作响应式弹出窗口 div？

Question

基本上我的网站是响应式的，但下面是我的弹出窗口的代码 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';

            }

Answer 1

您需要添加媒体查询以使其响应。

@media only screen and (max-width: 600px) {
 .popupBoxWrapper{
     width:100%;
  }
}

当屏幕宽度低于 600px 时，此 css 将使弹出窗口的宽度为 100%，而不是固定的 550px。所以这将使 div 适合屏幕。

Answer 2

Bootstrap Modals

或

Remodal

Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking.

Answer 3

不需要css媒体查询。

只需将您的 css 更改为以下即可。将 width:550px 更新为 max-width:550px 并添加 width:95%；当屏幕小于 550 像素时，剩余 5% 的宽度让您看起来像弹出窗口。

 .popupBoxWrapper{
     max-width: 550px;
     width: 95%;
     margin: 
     50px auto; 
     text-align: left;
 }

如何制作响应式弹出窗口 div？

How to make responsive popup div?

javascript

css

popup