bouton fermer html

Le bouton de fermeture en HTML est utilisé pour fermer une fenêtre ou une popup dans une page Web ou une application. Le bouton de fermeture est généralement une icône ou un texte, et l'utilisateur peut fermer la fenêtre ou la boîte contextuelle actuelle en cliquant sur le bouton. Cet article présentera le bouton de fermeture en HTML et comment implémenter différents types de boutons de fermeture.

1. Utilisation de base du bouton de fermeture

En HTML, le bouton de fermeture le plus basique est un élément de bouton. L'implémentation spécifique est la suivante :

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

#🎜. 🎜 #La méthode d'implémentation de ce bouton de fermeture est très simple. Lorsque l'utilisateur clique sur le bouton, la fonction JavaScript window.close() sera appelée pour fermer la fenêtre actuelle.

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() 2. Style d'icône du bouton de fermeture

En plus des boutons de texte, nous pouvons également utiliser des images ou des icônes pour implémenter des boutons de fermeture afin d'ajouter des effets visuels. Les icônes de fermeture couramment utilisées incluent X, ×, etc., qui peuvent être implémentées à l'aide d'icônes de police ou d'images personnalisées. Voici deux méthodes d'implémentation :

1. Utilisez des icônes de police

Les icônes de police peuvent spécifier des couleurs, des tailles et d'autres styles via CSS, ce qui est plus flexible et plus pratique. De plus, les icônes de polices peuvent être adaptées aux écrans de différentes résolutions, les rendant plus claires et plus fluides. Voici un exemple de bouton de fermeture utilisant l'icône de police Font Awesome :

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

Ici, nous utilisons l'élément link pour importer le fichier CSS Font Awesome, puis imbriquer un dans l'élément bouton i, définissez son attribut class sur fas fa-times, ce qui signifie utiliser l'icône times . Lorsque l'utilisateur clique sur le bouton de fermeture, le window.close() de JavaScript est exécuté.

2. Utilisez une image personnalisée

Pour utiliser une image personnalisée pour implémenter le bouton de fermeture, vous devez d'abord préparer une image. Son affichage ne prend pas trop de temps. photo sur la page Web prend du temps. L'exemple suivant utilise une icône de fermeture au format PNG :

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

Ici, nous intégrons un élément img dans le bouton et utilisons l'attribut src pour spécifier l'image. Dans l'URL, l'attribut alt est la description de l'image. Lorsque l'utilisateur clique sur le bouton, le window.close() de JavaScript est exécuté.

3. Conception du style du bouton de fermeture

De beaux boutons peuvent souvent améliorer l'expérience utilisateur.

1. Les boutons filaires

Les boutons filaires sont souvent utilisés dans les conceptions de style léger ou plat. La bordure, la couleur, la police, etc. du bouton peuvent être définies via des styles CSS. .

Voici une implémentation de bouton de fermeture utilisant le style filaire :

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

#🎜🎜#Nous avons ajouté un nom de classe appelé close-button pour définir le style du bouton . Voici le code CSS correspondant : #🎜🎜#rrreee#🎜🎜#Le code ci-dessus implémente le style de bouton suivant : #🎜🎜##🎜🎜##🎜🎜##🎜🎜#2. Icône du bouton #🎜🎜##🎜🎜#En plus d'utiliser descriptions textuelles, les boutons peuvent également exprimer des fonctions via des icônes. Ci-dessous, nous combinerons les icônes de police et les images personnalisées introduites précédemment pour implémenter le bouton de fermeture avec des icônes. #🎜🎜#rrreee#🎜🎜#Remarquez qu'ici nous avons ajouté un nouveau nom de classe close-icon-button, et avons également défini le nom de classe de l'élément intégré du bouton ifas fa-times signifie utiliser l'icône times. #🎜🎜##🎜🎜#Ce qui suit est le code de style correspondant : #🎜🎜#rrreee#🎜🎜#Le code ci-dessus implémente le style de bouton suivant : #🎜🎜##🎜🎜##🎜🎜##🎜🎜# 4. Fermez les boutons pour différents types de scénarios d'application #🎜🎜##🎜🎜#Il existe de nombreux types de boutons de fermeture, et le choix des différents types de boutons de fermeture doit être basé sur les besoins de l'application réelle. Cette section présentera le bouton de fermeture sous plusieurs besoins courants. #🎜🎜##🎜🎜#1. Le bouton de fermeture de la boîte modale #🎜🎜##🎜🎜#La boîte modale est une fenêtre pop-up largement utilisée dans les pages Web. Dans le même temps, la boîte modale a besoin d'un bouton de fermeture pour fermer la fenêtre contextuelle. #🎜🎜##🎜🎜#Généralement, le bouton de fermeture de la boîte modale doit être placé dans le coin supérieur droit de la boîte modale. La mise en œuvre spécifique est la suivante : #🎜🎜#rrreee#🎜🎜#Remarquez ici que nous. ajout d'une colonne nommée fonction JavaScript de closeModal(), utilisée pour fermer la boîte modale. #🎜🎜##🎜🎜#Ce qui suit est le code de style correspondant : #🎜🎜#rrreee#🎜🎜#Le code ci-dessus permet d'obtenir l'effet de boîte modale suivant : #🎜🎜##🎜🎜##🎜🎜##🎜🎜 ##🎜🎜#2. Bouton de fermeture pour plusieurs onglets #🎜🎜##🎜🎜#Dans le scénario de plusieurs onglets, lorsque l'utilisateur doit fermer l'onglet actuel, il peut utiliser le bouton de fermeture de l'onglet. #🎜🎜##🎜🎜#Ce qui suit est un exemple de bouton de fermeture utilisant un style d'image personnalisé : #🎜🎜#rrreee#🎜🎜#Le code CSS correspondant est le suivant : #🎜🎜#rrreee#🎜🎜#Le le code ci-dessus est implémenté comme suit L'effet de la page à onglet : #🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜#Conclusion#🎜🎜##🎜🎜#Cet article présente l'utilisation de base, le style des icônes et style du bouton de fermeture dans HTML Design et méthodes d'implémentation des boutons de fermeture dans différents scénarios d'application. J'espère que cela pourra vous aider à mieux concevoir des pages Web ou des applications. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!