Question

因此，我遵循了有关如何执行简单模态的教程，并且试图将其显示在单击后的页面上，但是没有任何反应。

模态在css表单中的样式为display：none。

html

<script src="modaltestjs.js"> </script>

</head>


    <body>
        <!--modal-->
        <div>
    <a href="#" id="button" class="button"> Click me </a>

        <div class="bg-modal"> 

            <div class="modal-content"> 

                <h4> Promotion/voucher code</h4> 
                <div class="close"> + </div>

            <form action="" method="POST"> 

                  <span> Promotion/voucher code: <input type="text" placeholder="Code"> </span>

               <button class="mbutton"> <a href=""> Ok </a> </button>
               <button class="mbutton"> <a href=""> Cancel </a> </button>


                </form>
            </div>
        </div>
       </div>


</body>

javascript

/*eslint-env browser*/

document.getElementById("button").addEventListener("click", function () {
    "use strict";
    document.querySelector(".bg-modal").style.display = "flex";

});

css

/*modal styling*/
.bg-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    position: absolute; 
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;

}

.modal-content{
    width: 600px;
    height: 200px;
    background-color: white;
    border-radius: 4px;
    text-align: center;
    position: relative;

}


input:focus{

    background-color: lightgreen

}

我希望出现模态框，但是一旦单击“单击我”，什么也不会发生。

Answer 1

如果尝试，您的代码将起作用。（尝试添加文档以查看代码是否正确加载）

$(document).ready(function() {
  document.getElementById("button").addEventListener("click", function () {
        "use strict";
        console.log("click")
        console.log(document.querySelector(".bg-modal"))
        document.querySelector(".bg-modal").style.display = "flex";
      });
});

另外：尝试添加console.log，看看是否在控制台中得到了点击消息。

尝试使用html和javascript来显示模式，但单击后未显示任何内容

1 个答案: