Home > Article > Web Front-end > How to make jquery pop-up window
jQuery is a fast, concise JavaScript library that simplifies HTML document traversal and manipulation, event handling, animation design, and Ajax interaction. In web development, pop-up windows are a common interaction method. This article will introduce how to use jQuery to create pop-up windows.
First, we need to introduce the CDN link of the jQuery library into the HTML file:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
Next, we create an HTML part containing the pop-up content:
<div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>Hello World!</p> </div> </div>
Here , the dc6dce4a544fdca2df29d5ac0ea9906b
element specifies a pop-up window container with the ID myModal
and the class name modal
; dc6dce4a544fdca2df29d5ac0ea9906b
The element contains another container with a class name of modal-content
, which is used to display the content of the pop-up window; the 45a2772a6b6107b401db3c9b82c049c2
element specifies a class name of close# The fork icon of ## is used to close the pop-up window; the
e388a4556c0f65e1904146cc1a846bee element contains the text content we want to display in the pop-up window.
// 获取弹窗元素 var modal = document.getElementById('myModal'); // 获取叉子图标元素 var closeBtn = document.getElementsByClassName('close')[0]; // 当叉子图标被点击时,关闭弹窗 closeBtn.onclick = function() { modal.style.display = "none"; } // 当用户点击其他地方时,关闭弹窗 window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } // 当按钮被点击时,显示弹窗 $('#myButton').click(function() { modal.style.display = "block"; });Here, we first obtain the pop-up window element and the fork icon element. Then, when the fork icon is clicked, we use the
onclick event to set the display property of the pop-up window to
none, thereby closing the pop-up window. Next, we use the
onlick event of the
window object to listen for the user's click events in other parts of the window so that the pop-up window can be closed when the user clicks an area outside the pop-up window.
block when clicked, thereby displaying the pop-up window. Here we use jQuery's
click() method to register the click event.
The above is the detailed content of How to make jquery pop-up window. For more information, please follow other related articles on the PHP Chinese website!