關閉按鈕 html-Golang-PHP中文網

HTML 中的關閉按鈕用於在網頁或應用程式中關閉某個視窗或彈出框。關閉按鈕一般為一個圖示或文字，使用者點擊按鈕即可關閉目前視窗或彈出框。本文將介紹 HTML 中的關閉按鈕以及不同類型的關閉按鈕的實作方法。

一、關閉按鈕的基礎用法

在HTML 中，最基礎的關閉按鈕是按鈕元素，具體實現方式如下：

<button onclick="window.close()">关闭</button>

登入後複製

這個關閉按鈕的實現方法非常簡單，當使用者點擊按鈕時，就會呼叫JavaScript 的window.close() 函數關閉目前視窗。

二、關閉按鈕的圖示樣式

除了文字按鈕，我們還可以使用圖片或圖示來實現關閉按鈕，以增添視覺效果。常用的關閉圖示有 X、× 等，可以使用字體圖示或自訂圖片來實現。以下是兩種實作方式：

1. 使用字體圖示

字體圖示可以透過 CSS 來指定顏色、大小等樣式，更靈活方便。而且，字體圖示可以適合不同解析度的螢幕，更加清晰流暢。以下是使用Font Awesome 字體圖示的關閉按鈕範例：

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<button onclick="window.close()">
  <i class="fas fa-times"></i>
</button>

登入後複製

這裡我們使用link 元素匯入Font Awesome 的CSS 文件，然後在按鈕裡嵌套一個i 元素，設定其class 屬性為fas fa-times，表示使用times 圖示。當使用者點選關閉按鈕時，執行 JavaScript 的 window.close()。

2. 使用自訂圖片

使用自訂圖片實現關閉按鈕，需要先準備一張圖片，在網頁上顯示這張圖片的時間並不會太耗時。下面這個範例使用PNG 格式的關閉圖示：

<button onclick="window.close()">
  <img src="close.png" alt="关闭">
</button>

登入後複製

這裡我們在按鈕裡嵌套一個img 元素，使用src 屬性指定圖片的URL，alt 屬性為圖像的描述，使用者點擊按鈕時，執行JavaScript 的window.close()。

三、關閉按鈕的樣式設計

外觀良好的按鈕往往可以提高使用者體驗，現在我們來對關閉按鈕進行樣式設計。

1. 線框按鈕

線框按鈕常用於輕量級或扁平化風格的設計，可透過 CSS 樣式設定按鈕的邊框、顏色、字體等。

下面是一個使用線框樣式的關閉按鈕實作：

<button class="close-button" onclick="window.close()">关闭</button>

登入後複製

我們新增了名為 close-button 的類別名，用於設定按鈕的樣式。以下是對應的CSS 程式碼：

.close-button {
  border: 1px solid #999;
  color: #999;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  background-color: transparent;
  transition: all .3s ease-in-out;
}

.close-button:hover {
  background-color: #999;
  color: #fff;
}

登入後複製

上述程式碼實作瞭如下的按鈕樣式：

2. 按鈕圖示

##除了使用文字描述，按鈕也可以透過圖示來表達功能。下面我們將結合先前介紹的字體圖示和自訂圖片來實現帶有圖示的關閉按鈕。

<button class="close-icon-button" onclick="window.close()">
  <i class="fas fa-times"></i>
</button>

登入後複製

注意到這裡我們加入了新的類別名稱

close-icon-button，同時設定按鈕內嵌元素i 的類別名稱fas fa -times，表示使用times 圖示。

下面是對應的樣式程式碼：

.close-icon-button {
  border: none;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.close-icon-button:hover {
  transform: rotate(45deg);
}

.close-icon-button i {
  color: #999;
  font-size: 14px;
  transition: all .3s ease-in-out;
}

.close-icon-button:hover i {
  color: #fff;
}

登入後複製

上述程式碼實作如下的按鈕樣式：

##四、不同型別場景的關閉按鈕

關閉按鈕種類繁多，選擇不同類型的關閉按鈕應根據實際應用的需求。本節將介紹幾種常見需求下的關閉按鈕。

1. 模態框上的關閉按鈕

模態框是一種彈出式窗口，在網頁中被廣泛應用。同時，模態框需要一個關閉按鈕來關閉彈出視窗。

一般情況下，模態框的關閉按鈕應該放置在模態框的右上角，具體實現如下：

<div class="modal">
  <button class="close-icon-button" onclick="closeModal()">
    <i class="fas fa-times"></i>
  </button>
  <!-- 模态框内容 -->
</div>

登入後複製

注意到這裡，我們添加了名為

closeModal ()

的JavaScript 函數，用於關閉模態方塊。下面是對應的樣式程式碼：

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.modal button {
  position: absolute;
  top: 10px;
  right: 10px;
}

登入後複製

以上程式碼實作如下的模態框效果：

2. 多個標籤頁的關閉按鈕

在多個標籤頁的場景中，當使用者需要關閉目前標籤頁時，可以使用在標籤頁上的關閉按鈕。

下面是一個使用自訂圖片樣式的關閉按鈕範例：

<div class="tab">
  <button class="close-tab-button" onclick="closeTab()">
    <img src="close.png" alt="">
  </button>
  <a href="#">标签页标题</a>
</div>

登入後複製

對應的CSS 程式碼如下：

.tab {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px 4px 0 0;
  background-color: #f7f7f7;
  position: relative;
}

.close-tab-button {
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 5px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.close-tab-button img {
  width: 16px;
  height: 16px;
}

登入後複製

以上程式碼實作如下的標籤頁效果：

結語