jquery implements suspended layer

In web development, the floating layer is a common interaction design, which can make the page experience smoother and better. With jQuery, we can easily implement a simple floating layer effect.

1. HTML structure

First, we need a div tag containing the content of the floating layer and set its style attributedisplay is none to hide it. Add another button that triggers the display of the floating layer, such as a button tag.

The code of the HTML page is as follows:

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

2. CSS style

In order to make the floating layer float above the page, we need to use CSS to set it position: fixed attribute. At the same time, we need to determine the location and size of the suspended layer and other properties.

CSS style code is as follows:

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

Here, we set the floating layer to be centered vertically and horizontally, using the translate function to achieve horizontal and vertical Directionally centered. z-index The attribute is used to define the hierarchical relationship to ensure that the floating layer has the highest level on the page.

3. JavaScript implementation

After the page is loaded, we need to add a click event to the button so that the floating layer can be displayed after clicking the button . Here we use jQuery’s click method to bind events.

In order to display the floating layer, we need to use jQuery's show method. We can increase the display animation effect by setting the duration attribute. We can use the fadeOut method to add exit animation effects to the floating layer. When we click the close button on the floating layer or click on the blank area outside the floating layer, the floating layer will automatically exit.

The JavaScript code is implemented as follows:

$(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);
        }
    });
});

We defined the click events of #show_float_box and the close button .close-btn so that the floating layer can Exit after clicking the close button. At the same time, we used $(document).click to add the function of clicking outside the content of the floating layer to exit the floating layer.

Finally, we completed the implementation of the suspended layer.

Summary:

Through the above steps, we can quickly achieve a simple suspended layer effect. We first need to create the HTML structure and design the CSS style for the floating layer. Finally, we use jQuery to control the JavaScript code to display and exit the floating layer. The implementation of the floating layer is very practical in web development, and it can provide users with a more comfortable experience.

The above is the detailed content of jquery implements suspended layer. For more information, please follow other related articles on the PHP Chinese website!