个人中心
gpt4 book ai didi

javascript - 如何使模态框响应？

转载 作者：太空宇宙 更新时间：2023-11-04 09:05:04 27 4
gpt4 key购买 nike

我已经实现了这个基于 CSS 的模态框。它工作完美，并且非常易于使用。但是，它没有响应。我们怎样才能让它响应？请帮忙。

<!DOCTYPE html>
    <html>
    <head>
    <style> 
    /* The Modal (background) */
    .modal4 {
        display: none; 
        position: fixed; 
        z-index: 1; 
        padding-top: 100px; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background-color: rgb(0,0,0); 
        background-color: rgba(0,0,0,0.4); 
    }

    /* Modal content1 */
    .modal4-content2 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 80%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0} 
        to {top:0; opacity:1}
    }

    @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    /* The Close Button */
    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .modal4-header2 {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
    }

    .modal4-body {padding: 2px 16px;}

    .modal4-footer2 {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
    }
    </style>
    </head>
    <body>

    <h2>Animated Modal with header1 and footer1</h2>

    <!-- Trigger/Open The Modal -->
    <button id="myBtn4">Open Modal</button>

    <!-- The Modal -->
    <div id="myModal4" class="modal4">

      <!-- Modal content1 -->
      <div class="modal4-content2">
        <div class="modal4-header2">
          <span class="close">&times;</span>
          <h2>Modal header1</h2>
        </div>
        <div class="modal4-body">
          <p>Some text in the Modal Body</p>
          <p>Some other text...</p>
        </div>
        <div class="modal4-footer2">
          <h3>Modal footer1</h3>
        </div>
      </div>

    </div>

    <script>
    // Get the modal
    var modal4 = document.getElementById('myModal4');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn4");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal 
    btn.onclick = function() {
        modal4.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal4.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal4) {
            modal4.style.display = "none";
        }
    }
    </script>

    </body>
    </html>

最佳答案

您的代码是响应式的...但是如果您仍然没有响应式，请在 head 中添加以下元标记:

<meta name="viewport" content="width=device-width, initial-scale=1">

关于javascript - 如何使模态框响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42505345/

27 4 0
文章推荐： python - 如何使用 "with open"语句打开多个文件(事先未知的文件数)？
文章推荐： java - Lombok/Jackson - 用于 json 数组的 POJO
文章推荐： linux - 在 Linux 上安装 libjson-rpc-perl
文章推荐： python - cython 不支持按键排序？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com