关闭按钮 html

时间：2023-05-09 22:04

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;}

以上代码实现了如下的标签页效果：