我希望 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

编辑：这是一个使用您的代码并添加功能的工作示例。这应该告诉你你在这里缺少什么。

Code Sandbox Example

确保在新的 window 中打开 "browser"。由于某些原因，浏览器预览没有显示正确的结果。

Answer 2

编辑：使用 jQuery 更新淡入/淡出，因为我在 OP 中错过了它。

您可以使用 position:absolute 使模态居中。请参阅 this 类似 post 并相应地更改您的 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>

我希望 javascript 在页面中央弹出

i want javascript pop up in the center of page

html

javascript

animation

modal-dialog

popup