Home  >  Article  >  Web Front-end  >  How to make jquery pop-up window

How to make jquery pop-up window

王林
王林Original
2023-05-25 13:03:081083browse

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 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.

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn