jQuery: 如何打开新的模态对话框或弹出窗口 window

Question

主页底部有一个登录按钮。当我点击按钮时，我想打开一个像另一个网页一样工作的新框架！但是弹窗window应该在首页里面打开，并且位于首页中间！它应该比主页小。

我一直在寻找如何打开新标签页或新标签页 window。我想知道如何打开位于主页中心的弹出窗口 window。

Answer 1

的 JavaScript 解决方案

试一试：

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Place Your Content Here ..</p>
  </div>

</div>

Answer 2

这两个答案，使用jQuery，将快速解释如何创建您自己的弹出模式对话框（也称为灯箱）。

jQuery Lightbox appearing blank

A modal is just a pop-up dialog box that: (a) pops-up overtop of other content, and (b) usually prevents you from interacting with the underlying page until it is closed.

和

A lightbox is just a regular DIV structure that has been styled position:absolute or position:fixed to remove it from the normal HTML flow. It is then hidden, and displayed when desired upon a button click or other detectable event (mouseover, ajax.done, etc).

定位对话框并使其看起来很棒（呃）是 CSS 的工作。

请注意，您还可以使用 library/framework，例如 Bootstrap 或 jQueryUI （一个单独的补充库，其工作方式与jQuery 并提供许多附加功能），以提供带有 skookum CSS 的预制对话框，其中已经为您预先完成了许多工作位。

https://www.w3schools.com/bootstrap4/bootstrap_modal.asp

https://jqueryui.com/dialog/

然而，最重要的是，在您选择使用库之前，了解模式对话框是什么。而且，由于理解上面第一个链接的答案只需要 5 分钟，所以很容易完成。

jQuery: 如何打开新的模态对话框或弹出窗口 window

jQuery: How to open a new modal dialog or popup window

css

jquery

modal-dialog