Jquery의 팝업 상자 점프

웹 기술이 지속적으로 발전함에 따라 프런트 엔드 개발에서 팝업 점프가 점점 더 많이 사용되고 있습니다. 그 중 jQuery의 팝업 효과는 많은 개발자들에게 사랑을 받고 있습니다. 이 기사에서는 팝업 점프를 구현하기 위한 jQuery의 구체적인 단계와 실제 데모를 소개합니다.

1. 팝업 점프 개요

Bop-up은 일반적으로 현재 페이지에 프롬프트 상자를 표시하여 일부 정보를 표시하거나 사용자에게 작업 수행을 상기시키는 데 사용됩니다. 점프는 프롬프트 상자의 버튼이나 링크를 클릭하면 해당 페이지로 직접 이동한다는 의미입니다. 팝업 점프의 장점은 사용자 상호 작용 경험을 향상시키고 현재 페이지를 종료하지 않고도 점프 효과를 얻을 수 있다는 것입니다.

2. jQuery에서 팝업 상자 점프를 구현하는 단계

jQuery는 대화 상자() 메서드를 호출하여 팝업 상자 기능을 구현하고, window.location.href() 메서드를 호출하여 페이지 점프 기능을 구현합니다. 구체적인 단계는 다음과 같습니다.

1. jQuery 라이브러리 소개

jQuery 팝업 상자 점프를 구현하기 전에 먼저 jQuery 라이브러리를 소개해야 합니다. 헤더 스크립트 태그에 도입할 수 있습니다:

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

2. 팝업 프레임 생성

jQuery UI 플러그인의Dialog() 메소드를 사용하여 팝업 프레임을 생성하고 요소를 사용자 정의할 수 있습니다. 팝업 프레임에 스타일을 추가합니다. 예를 들어, 간단한 팝업 상자를 만듭니다.

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

위 코드에서 autoOpen 속성은 팝업 상자를 자동으로 열지 않도록 false로 설정됩니다. modal 속성은 true로 설정되어 팝업 상자 외부 영역이 팝업 상자를 클릭하면 팝업 상자가 닫히지 않습니다. 버튼 속성 팝업 상자의 버튼을 사용자 정의할 수 있습니다.

3. 팝업 상자에서 window.location.href를 호출하여 점프

팝업 상자에 버튼이나 링크를 추가하고, 버튼이나 링크의 클릭 이벤트에서 window.location.href를 호출하여 완료하세요. 페이지 점프. 예를 들어 위 팝업 상자에 "점프" 버튼을 추가합니다.

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

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

3. jQuery 팝업 상자 점프 예제

다음은 전체 jQuery 팝업 상자 점프 예제로, 팝을 만드는 방법을 보여줍니다. -up 상자 및 팝업 상자 안의 새 페이지로 이동:

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

이 예에서는 사용자가 현재 페이지에서 나가려고 하면 확인 상자가 나타납니다. 사용자가 "확인" 버튼을 클릭하면 "example.com" 페이지로 리디렉션됩니다. 사용자가 "취소" 버튼을 클릭하면 팝업 상자가 닫히고 현재 페이지에 남아 있습니다.

요약

이 글에서는 팝업 상자 점프를 구현하기 위한 jQuery의 단계와 실제 데모를 간략하게 소개합니다. 팝업 상자를 사용하여 점프하면 사용자 상호 작용 경험을 향상시키고 사용자에게 편의성을 제공할 수 있습니다. 프론트엔드 개발자는 jQuery 팝업 점프에 대한 지식을 이해하고 숙달하는 것이 필요합니다.

위 내용은 Jquery의 팝업 상자 점프의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!