bouton de fermeture javascript

Application et implémentation du bouton de fermeture JavaScript

Dans la conception Web, nous devons parfois ajouter un bouton de fermeture dans une fenêtre contextuelle ou une boîte modale afin que les utilisateurs puissent fermer la fenêtre à tout moment. Cet article explique comment utiliser JavaScript pour implémenter la fonction du bouton de fermeture.

1. Utilisez le code HTML pour créer un bouton de fermeture

Dans le code HTML, nous pouvons utiliser la balise <button> pour créer un bouton de fermeture. Le code est le suivant : <button> 标签创建一个关闭按钮，其代码如下：

<button onclick="closeWindow()">关闭窗口</button>

其中，onclick 属性会在按钮被点击时触发某个函数。我们需要在 JavaScript 中定义 closeWindow() 函数，以实现关闭窗口的功能。

二、使用 Window 对象关闭窗口

在 JavaScript 中，我们可以使用 Window 对象来关闭当前窗口或者打开的子窗口。以下是两个实现方式：

1. 使用 window.close() 方法来关闭当前窗口：

function closeWindow() {
    window.close();
}

注意：window.close() 方法只能关闭由 JavaScript 打开的窗口。如果当前窗口是用户打开的，则该方法将不起作用。

2. 使用 window.opener 属性来关闭父窗口或者打开的子窗口：

function closeWindow() {
    window.opener=null;
    window.open('','_self');
    window.close();
}

在这个例子中，我们首先将 window.opener 设为 null，以保证关闭的窗口不会再次自动打开其父窗口。接着我们使用 window.open() 方法来打开一个空白窗口，这个方法的第一个参数为要打开的 URL，由于我们不需要打开任何网址，所以传入了一个空字符串。第二个参数为窗口名称，这里使用了 _self，表示在当前窗口中打开一个新网页。最后我们使用 window.close() 方法来关闭当前窗口。

三、在 jQuery 中实现关闭按钮

如果我们使用 jQuery 来编写 JavaScript 代码，可以使用以下两种方式来实现关闭按钮的功能：

1. 使用 window.close() 方法来关闭当前窗口（同上）：

function closeWindow() {
    window.close();
}

2. 在 jQuery 中模拟窗口关闭事件：

function closeWindow() {
    var windowEvent = jQuery.Event('beforeunload');
    $(window).trigger(windowEvent);

    if (!windowEvent.isDefaultPrevented()) {
        window.close();
    }
}

在这个例子中，我们首先定义了一个模拟的窗口关闭事件。接着使用 jQuery 的 trigger() 方法来触发该事件，这将会执行所有已注册到该事件的处理程序。如果处理程序无阻止事件的默认行为，则会执行 window.close() 方法来关闭当前窗口。

总结：

本文介绍了在 JavaScript 和 jQuery 中如何实现关闭按钮。无论你是通过 window.close()rrreee

Parmi. eux, l'attribut onclick déclenchera une fonction lorsque le bouton est cliqué. Nous devons définir la fonction closeWindow() en JavaScript pour réaliser la fonction de fermeture de la fenêtre. 🎜🎜2. Utilisez l'objet Window pour fermer la fenêtre🎜🎜En JavaScript, nous pouvons utiliser l'objet Window pour fermer la fenêtre actuelle ou une fenêtre enfant ouverte. Voici deux méthodes d'implémentation : 🎜

1. Utilisez la méthode window.close() pour fermer la fenêtre actuelle :

rrreee🎜Remarque : window. La méthode close() ne peut fermer que les fenêtres ouvertes par JavaScript. Cette méthode ne fonctionnera pas si la fenêtre actuelle est ouverte par l'utilisateur. 🎜

2. Utilisez la propriété window.opener pour fermer la fenêtre parent ou la fenêtre enfant ouverte :

rrreee🎜Dans cet exemple, Nous commençons par définir window.opener sur null pour garantir que la fenêtre fermée n'ouvrira pas automatiquement sa fenêtre parent. Ensuite, nous utilisons la méthode window.open() pour ouvrir une fenêtre vide. Le premier paramètre de cette méthode est l'URL à ouvrir. Puisque nous n'avons pas besoin d'ouvrir d'URL, un caractère nul est. passé en chaîne. Le deuxième paramètre est le nom de la fenêtre. _self est utilisé ici, ce qui signifie ouvrir une nouvelle page Web dans la fenêtre actuelle. Enfin nous utilisons la méthode window.close() pour fermer la fenêtre actuelle. 🎜🎜3. Implémentez le bouton de fermeture dans jQuery🎜🎜Si nous utilisons jQuery pour écrire du code JavaScript, nous pouvons utiliser les deux méthodes suivantes pour implémenter la fonction du bouton de fermeture : 🎜

1. Utilisez window.close( ) Méthode pour fermer la fenêtre actuelle (identique à ci-dessus) :

rrreee

2. Simuler l'événement de fermeture de la fenêtre dans jQuery :
rrreee 🎜Dans cet exemple, nous définissons d'abord un événement de fermeture de fenêtre simulé. Utilisez ensuite la méthode trigger() de jQuery pour déclencher l'événement, qui exécutera tous les gestionnaires enregistrés pour l'événement. Si le gestionnaire n'a pas de comportement par défaut de blocage de l'événement, la méthode window.close() sera exécutée pour fermer la fenêtre actuelle. 🎜🎜Résumé : 🎜🎜Cet article présente comment implémenter le bouton de fermeture en JavaScript et jQuery. Que vous fermiez une fenêtre via la méthode window.close() ou que vous simuliez un événement de fermeture de fenêtre, pensez à définir clairement votre comportement de fermeture dans votre code et à le communiquer à l'utilisateur. 🎜

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!