Pop-up box jump in jquery

With the continuous advancement of web technology, pop-up jumps are increasingly used in front-end development. Among them, jQuery’s pop-up jump effect is liked by many developers. This article will introduce the specific steps and practical demonstrations of jQuery to implement pop-up jump.

1. Overview of pop-up box jump

Pop-up box jump is usually used to pop up a prompt box on the current page to display some information or remind the user to perform an operation. Jump means that when you click a button or link in the prompt box, you will jump directly to the corresponding page. The advantage of pop-up jump is that it can improve the user interaction experience and achieve the jump effect without exiting the current page.

2. Steps for jQuery to realize pop-up box jump

jQuery realizes the function of pop-up box by calling the dialog() method, and realizes the page jump function by calling the window.location.href() method. . The specific steps are as follows:

1. Introduce the jQuery library

Before implementing jQuery pop-up box jump, you need to introduce the jQuery library first. It can be introduced in the header script tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Create a pop-up box

Use the dialog() method in the jQuery UI plug-in to create a pop-up box. You can customize the elements and content in the pop-up box. Style etc. For example, create a simple pop-up box:

<div id="dialog-box">
  <p>这是一个弹框</p>
  <a href="#" class="btn">跳转</a>
</div>

<script>
$("#dialog-box").dialog({
  autoOpen:false,
  modal:true,
  buttons:{
    "确定":function(){
      $(this).dialog("close");
    }
  }
});
</script>

In the above code, the autoOpen attribute is set to false to not automatically open the pop-up box; the modal attribute is set to true so that when the area outside the pop-up box is clicked, the pop-up box will not Close; the buttons in the pop-up box can be customized in the buttons attribute.

3. Call window.location.href in the pop-up box to jump

Add a button or link in the pop-up box, and call window.location.href in the click event of the button or link Complete page jump. For example, add a "jump" button to the above pop-up box:

<a href="#" class="btn">跳转</a>

<script>
$(".btn").click(function(){
  window.location.href = "http://www.example.com";
});

3. jQuery pop-up box jump example demonstration

The following is a complete jQuery pop-up box jump example and demonstration Learn how to create a pop-up box and jump to a new page in the pop-up box:

  
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  
  


  

    
确定要离开该页面吗？
    确定
  

  <script>
    $("#dialog-box").dialog({
      autoOpen:false,
      modal:true,
      buttons:{
        "取消":function(){
          $(this).dialog("close");
        }
      }
    });

    $(".btn").click(function(){
      window.location.href = "http://www.example.com";
    });

    window.onbeforeunload = function(){
      $("#dialog-box").dialog("open");
    };
  </script>

In this example, when the user tries to leave the current page, a confirmation box will pop up. If the user clicks the "OK" button, they will be redirected to the "example.com" page. If the user clicks the "Cancel" button, the pop-up box is closed and remains on the current page.

Summary

This article briefly introduces the steps and example demonstrations of jQuery to implement pop-up box jump. Using pop-up boxes to jump can improve user interaction experience and bring convenience to users. It is necessary for front-end developers to understand and master the knowledge of jQuery pop-up jump.

The above is the detailed content of Pop-up box jump in jquery. For more information, please follow other related articles on the PHP Chinese website!