我想在頁面中央彈出 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

編輯：這是一個使用您的代碼並添加功能的工作示例。 這應該告訴你你在這里缺少什么。

代碼沙箱示例

確保在新的 window 中打開“瀏覽器”。瀏覽器預覽由於某種原因沒有顯示正確的結果。

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>