HTML彈框全面解析

一、HTML彈窗

HTML彈窗是指在網頁中顯示的一個彈出框，它可以顯示提示信息、警告信息、錯誤信息或者需要用戶輸入信息的情況等。在現今的網站開發中，HTML彈窗已經成為了常見的可交互的UI界面之一。

下面是一個HTML彈窗的簡單示例，點擊按鈕即可呼出彈窗。

<button onclick="alert('Hello World!')">Click Me</button>

二、HTML彈框里跳轉到第三方網頁

在HTML彈框中跳轉到第三方網頁是一種常見的需求，在需要展示其他網站的內容或者跳轉到其他功能頁面時十分實用。在這種情況下，我們可以使用iframe標籤嵌入到彈框中。

下面是一個跳轉到百度首頁的HTML彈框示例：

<button onclick="showIframe()">Click Me</button>

<div id="myIframe" style="display:none;">
  <iframe src="https://www.baidu.com" width="100%" height="100%"></iframe>
</div>

<script>
function showIframe() {
  var iframe = document.getElementById("myIframe");
  iframe.style.display = "block";
}
</script>

三、HTML彈框實現

實現一個HTML彈框有多種方式，可以使用原生JavaScript、jQuery等庫或框架來實現。這裡以原生JavaScript為例來介紹如何實現一個可復用的HTML彈框。

思路如下：

• 創建彈框元素，並添加到DOM中
• 添加彈框內容
• 顯示/隱藏彈框

下面是示例代碼：

<button onclick="showModal()">Click Me</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="hideModal()">×</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

<script>
var modal = document.getElementById("myModal");

function showModal() {
  modal.style.display = "block";
}

function hideModal() {
  modal.style.display = "none";
}
</script>

四、HTML彈框alert

alert是原生JavaScript函數之一，它可以在網頁中展示一段提示信息給用戶，並且阻塞其他代碼的執行，直到用戶關閉彈框為止。

下面是一個alert彈窗的示例代碼：

<button onclick="alert('Hello World!')">Click Me</button>

五、HTML彈框確認

confirm是原生JavaScript函數之一，它可以在網頁中展示一個確認框給用戶進行選擇，常用於要求用戶進行某個操作前需要確認一下。

下面是一個confirm彈窗的示例代碼：

<button onclick="myFunction()">Click Me</button>

<script>
function myFunction() {
  var result = confirm("Press a button!");
  if (result == true) {
    alert("You pressed OK!");
  } else {
    alert("You pressed Cancel!");
  }
}
</script>

六、HTML彈框攔截

在某些情況下，我們希望在用戶關閉頁面或者離開頁面的時候，能夠有一個確認的彈框來提示用戶進行二次確認，以防止誤操作。這個可以使用beforeunload事件來實現。

下面是一個攔截示例，當用戶離開當前頁面時，會彈出確認框詢問是否離開：

<script>
window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "Are you sure you want to leave?";

  e.returnValue = confirmationMessage;
  return confirmationMessage;
});
</script>

七、HTML彈框有哪些種類

除了上面介紹的alert和confirm之外，還有其他的彈框類型，如prompt、toast等。prompt可以展示一個帶輸入框的彈框，toast可用於短暫地展示一些信息等。

下面是兩個示例：

// prompt
var name = prompt("Please enter your name", "Harry Potter");
if (name != null) {
  alert("Hello " + name + "! How are you today?");
}

// toast
function showToast() {
  var x = document.getElementById("toast");
  x.className = "show";
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>
<style>
#toast {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#toast.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
</style>

<button onclick="showToast()">Click Me</button>

<div id="toast">Hello World!</div>

八、HTML彈窗美化

HTML彈窗的美化，對於提升用戶體驗有著重要的作用。我們可以通過CSS來實現彈窗的美化，如設置背景色、字體顏色、添加陰影等。

下面是一個漂亮的HTML彈框的示例：

<button onclick="showModal()">Click Me</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="hideModal()">×</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

<style>
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  animation-name: animatetop;
  animation-duration: 0.4s;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}
</style>

需求是否完全滿足呢？