Ajouter du javascript au bouton de fermeture

Comment ajouter un bouton de fermeture à une page web ? Il s’agit peut-être d’une exigence souvent négligée, mais en réalité, sur une page Web contenant de nombreuses informations, les utilisateurs peuvent être amenés à la fermer après une navigation prolongée. En particulier sur les appareils mobiles, où les utilisateurs sont réticents à faire défiler la page en raison de la taille des écrans, ils sont plus susceptibles de choisir de fermer la page plutôt que de passer plus de temps à lire le contenu. Certains concepteurs Web pensent que l'ajout d'un bouton de fermeture dans le coin supérieur gauche de la page contribuera à offrir une meilleure expérience utilisateur. Par conséquent, dans cet article, nous présenterons comment utiliser JavaScript pour ajouter un simple bouton de fermeture.

1. Créer un élément de bouton de fermeture

Dans la première étape, nous devons créer un élément de bouton de fermeture. En HTML, nous pouvons utiliser l'élément bouton pour créer un bouton et lui donner un attribut id. En CSS, nous pouvons définir le style du bouton, comme la définition de la position, de la taille et de la couleur du bouton. Le code est le suivant :

HTML

<button id="close-button">关闭</button>

CSS

#close-button {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  background-color: #f00;
  color: #fff;
  cursor: pointer;
}

2. Ajouter du code JavaScript

Ensuite, nous devons ajouter du code JavaScript. Nous devons d’abord obtenir l’élément du bouton de fermeture, puis y ajouter un écouteur d’événement. Lorsque l'utilisateur clique sur le bouton, cet écouteur d'événements se déclenche et exécute une fonction qui ferme la page en cours. Le code est le suivant :

JavaScript

var closeButton = document.getElementById('close-button');
closeButton.addEventListener('click', function() {
  window.close();
});

Dans cet exemple, nous utilisons la méthode close() de l'objet window en JavaScript pour fermer la page en cours.

3. Testez et ajustez le style

Maintenant, nous pouvons ouvrir la page Web et voir si le bouton de fermeture fonctionne correctement. Si après avoir cliqué sur le bouton, la page Web se ferme et revient à la page d'accueil du navigateur ou ouvre une nouvelle page, cela signifie que le bouton de fermeture a été défini avec succès.

Enfin, nous pouvons apporter les ajustements appropriés au style du bouton de fermeture, comme changer sa couleur ou sa taille, ou ajouter des icônes, etc. Une fois ces opérations terminées, nous pouvons publier et partager la page Web avec les utilisateurs.

En bref, lors du développement d'applications Web, il est très important d'offrir aux utilisateurs une meilleure expérience utilisateur. L’ajout d’un simple bouton de fermeture permet non seulement aux utilisateurs de fermer plus facilement la page, mais rend également l’utilisation de l’application plus efficace. J'espère qu'après avoir lu cet article, vous avez appris à ajouter un bouton de fermeture à l'aide de JavaScript.

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!