我想要javascript弹出在页面的中心

Question

我正在一个Html网站上工作，我有弹出代码，但它显示了页面的顶部，但我想在页面的中心显示这个，淡入和淡出效果请帮助我如何做到这一点。谢谢

<script>function openModal(){

    $("#exampleModalLong").modal();

    setTimeout(function(){ $("#exampleModalLong").modal("hide"); }, 3000);

}</script>

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">

        <div class="modal-dialog" role="document">

          <div class="modal-content">

            <div class="modal-header">

            <center>  <h1 class="modal-title" id="exampleModalLongTitle">The Janwari Group Of Companies</h1></center>

              <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                <span aria-hidden="true">&times;</span>

              </button>

            </div>

            <div class="modal-body">

              <center><h4>Description</h4></center>

            </div>

          </div>

        </div>

      </div>

Answer 1

编辑：这是一个使用您的代码并添加功能的工作示例。这应该会告诉你你在这里错过了什么。代码沙箱示例确保在新窗口中打开“浏览器”。由于某种原因，浏览器预览未显示正确的结果。

Answer 2

编辑：使用jQuery更新了淡入淡出/淡出，因为我在OP中错过了它。您可以使用 position：absolute 将模式居中。请参阅此类似的帖子并相应地更改您的CSS。示例使用jQuery在模态上淡出/淡出，并以CSS居中.modal {&nbsp; width: 300px;&nbsp; height: 300px;&nbsp; position: absolute;&nbsp; left: 50%;&nbsp; top: 50%;&nbsp; margin-left: -150px;&nbsp; margin-top: -150px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>&nbsp; $(document).ready(function() {&nbsp; &nbsp; $(".close").click(function() {&nbsp; &nbsp; &nbsp; $(".modal").fadeOut(3000);&nbsp; &nbsp; });&nbsp; &nbsp; $(".open").click(function() {&nbsp; &nbsp; &nbsp; $(".modal").fadeIn(3000);&nbsp; &nbsp; });&nbsp; });</script><button type="button" class="open" data-dismiss="modal" aria-label="Open">Open</button><div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">&nbsp; <div class="modal-dialog" role="document">&nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; <center>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 class="modal-title" id="exampleModalLongTitle">The Janwari Group Of Companies</h1>&nbsp; &nbsp; &nbsp; &nbsp; </center>&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="close" data-dismiss="modal" aria-label="Close">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span aria-hidden="true">&times;</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; <center>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Description</h4>&nbsp; &nbsp; &nbsp; &nbsp; </center>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>