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">&times;</span>
    <p>Hello World!</p>
  </div>
</div>

Here , the <div> element specifies a pop-up window container with the ID myModal and the class name modal; <div> 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 <span> element specifies a class name of close# The fork icon of ## is used to close the pop-up window; the

element contains the text content we want to display in the pop-up window.

Next, we need to write JavaScript code to implement 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.

Finally, we listen to the click event of the button and use jQuery to set the display property of the pop-up window to

block when clicked, thereby displaying the pop-up window. Here we use jQuery's click() method to register the click event.

Using the above code, we have now created a basic jQuery popup example. In actual projects, you can customize pop-up windows through styles and JavaScript code to meet different needs.

Summary:

jQuery is a popular JavaScript library that can be used to simplify HTML document traversal and manipulation, event handling, animation design, and Ajax interaction. You can easily create pop-up windows using jQuery, and you can customize the style and functionality of the pop-up window as needed. In actual projects, you can use jQuery to achieve a more advanced user interaction experience.

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!