我想要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 {

  width: 300px;

  height: 300px;

  position: absolute;

  left: 50%;

  top: 50%;

  margin-left: -150px;

  margin-top: -150px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

  $(document).ready(function() {

    $(".close").click(function() {

      $(".modal").fadeOut(3000);

    });

    $(".open").click(function() {

      $(".modal").fadeIn(3000);

    });

  });

</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">

  <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>