jQuery tutorial to implement close button event-JS Tutorial-php.cn

jQuery tutorial to implement close button event

王林

Release： 2024-02-23 18:18:27

Original

1183 people have browsed it

jQuery tutorial to implement close button event

In web development, the close button is a common function. Users often click the close button to close the pop-up window or prompt box in the web page. In jQuery, it is very simple and convenient to implement the close button event. The following will provide a specific code example to help you learn how to implement the close button event.

First of all, make sure you have introduced the jQuery library file, which can be introduced through CDN or downloaded locally. Next, we will create an HTML code that contains a close button:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关闭按钮事件示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="popup">
    <h2>这是一个弹窗</h2>
    <p>这里可以输入弹窗的内容。</p>
    <button class="close-btn">关闭</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Copy after login

In the above code, we have created a structure that contains a popup window and a close button. Next, let's implement the click event of the close button so that the pop-up window can be closed when the close button is clicked.

In the script.js file, we use jQuery to select the close button element and add a click event to it. When the close button is clicked, we use jQuery's hide() method to hide the pop-up window:

$(document).ready(function(){
    $('.close-btn').click(function(){
        $('.popup').hide();
    });
});

Copy after login

The above code is very simple. First, use $(document).ready() to ensure that the DOM is loaded before executing the jQuery code. Then use $('.close-btn').click() to add a click event to the close button. When the close button is clicked, select the popup with the class name .popup window element, and then call the hide() method to hide the pop-up window.

Finally, in the styles.css file, you can style the pop-up window, such as setting the position, size, background color, etc. of the pop-up window to make the pop-up window look more beautiful.

Through the above code examples, you can learn how to use jQuery to implement the close button event so that the pop-up window can be closed when the close button is clicked. I hope this tutorial can help you better master the basic knowledge of jQuery and improve your web development skills.

The above is the detailed content of jQuery tutorial to implement close button event. For more information, please follow other related articles on the PHP Chinese website!