jquery implémente une couche suspendue

Dans le développement Web, la couche flottante est une conception d'interaction courante, qui peut rendre l'expérience de la page plus fluide et meilleure. Avec jQuery, nous pouvons facilement implémenter un simple effet de couche flottante.

1. Structure HTML

Tout d'abord, nous avons besoin d'une balise div qui contient le contenu du calque flottant et définit ses attributs de style display sont aucun pour le masquer. Ajoutez un autre bouton qui déclenche l'affichage du calque flottant, comme une balise button. div 标签并设置其样式属性 display 为 none，将其隐藏起来。再添加一个触发显示悬浮层的按钮，例如一个 button 标签。

HTML 页面的代码如下：

<div id="float_box" style="display: none;">
    <!-- 悬浮层内容 -->
</div>
<button id="show_float_box">显示悬浮层</button>

2. CSS 样式

为了使悬浮层能够浮动在页面上方，我们需要使用 CSS 为其设置 position: fixed 属性。同时，我们需要确定悬浮层的位置和大小等属性。

CSS 样式代码如下：

#float_box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 9999;
}

在这里，我们设置悬浮层在垂直方向上居中，水平方向上居中，使用 translate 函数来实现水平和垂直方向上的居中。z-index 属性用于定义层级关系，确保悬浮层在页面上的层级最高。

3. JavaScript 实现

在页面加载完成后，我们需要为按钮添加 click 事件，使得点击按钮后，悬浮层可以显示出来。这里我们使用 jQuery 的 click 方法来绑定事件。

为了使悬浮层显示出来，我们需要使用 jQuery 的 show 方法。我们可以通过设置 duration 属性来增加显示动画效果。我们可以使用 fadeOut 方法来为悬浮层添加退出动画效果，当我们在悬浮层上点击关闭按钮或者点击悬浮层外的空白区域时，悬浮层会自动退出。

JavaScript 代码实现如下：

$(document).ready(function () {
    // 显示悬浮层
    $("#show_float_box").click(function () {
        $("#float_box").show(300);
    });

    // 悬浮层退出
    $("#float_box .close-btn").click(function () {
        $("#float_box").fadeOut(200);
    });

    $(document).click(function (event) {
        if (!$(event.target).closest("#float_box").length) {
            $("#float_box").fadeOut(200);
        }
    });
});

我们定义了 #show_float_box 和关闭按钮 .close-btn 的点击事件，使得悬浮层可以在点击关闭按钮后退出。同时，我们使用了 $(document).click

Le code de la page HTML est le suivant :

rrreee

Style CSS

In afin que le calque flottant flotte au-dessus de la page, nous devons utiliser CSS pour définir l'attribut position:fixe pour celui-ci. Dans le même temps, nous devons déterminer l’emplacement et la taille de la couche suspendue ainsi que d’autres propriétés.

#🎜🎜#Le code de style CSS est le suivant : #🎜🎜#rrreee#🎜🎜#Ici, nous définissons le calque flottant pour qu'il soit centré verticalement et horizontalement, à l'aide de la fonction traduire pour réaliser un centrage horizontal et vertical. L'attribut z-index est utilisé pour définir des relations hiérarchiques afin de garantir que la couche flottante se trouve au niveau le plus élevé de la page. #🎜🎜#
#🎜🎜#Implémentation JavaScript#🎜🎜##🎜🎜##🎜🎜#Une fois la page chargée, nous devons ajouter l'événement click pour le bouton , afin que le calque flottant puisse être affiché après avoir cliqué sur le bouton. Ici, nous utilisons la méthode click de jQuery pour lier l'événement. #🎜🎜##🎜🎜#Afin d'afficher la couche flottante, nous devons utiliser la méthode show de jQuery. Nous pouvons augmenter l'effet d'animation d'affichage en définissant l'attribut duration. Nous pouvons utiliser la méthode fadeOut pour ajouter des effets d'animation de sortie au calque flottant. Lorsque nous cliquons sur le bouton de fermeture du calque flottant ou cliquons sur la zone vide à l'extérieur du calque flottant, le calque flottant se ferme automatiquement. . #🎜🎜##🎜🎜#Le code JavaScript est implémenté comme suit : #🎜🎜#rrreee#🎜🎜#On définit le clic de #show_float_box et le bouton de fermeture .close-btn , afin que le calque flottant puisse se fermer après avoir cliqué sur le bouton de fermeture. Dans le même temps, nous avons utilisé $(document).click pour ajouter la fonction de cliquer en dehors du contenu du calque flottant pour quitter le calque flottant. #🎜🎜##🎜🎜#Enfin, nous avons terminé la mise en place de la couche flottante. #🎜🎜##🎜🎜#Résumé : #🎜🎜##🎜🎜#Grâce aux étapes ci-dessus, nous pouvons rapidement obtenir un simple effet de couche suspendue. Nous devons d'abord créer la structure HTML et concevoir le style CSS pour le calque flottant. Enfin, nous utilisons jQuery pour contrôler le code JavaScript afin d'afficher et de quitter le calque flottant. La mise en œuvre de la couche flottante est très pratique dans le développement Web, car elle peut offrir aux utilisateurs une expérience plus confortable. #🎜🎜#

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!