jQuery UI : 사용자가 확인하거나 취소해야하는 대화 상자 표시

Question

내 사이트에 사용자가 클릭 할 때 모달 대화 상자를 표시해야하는 몇 개의 링크가 있습니다. 이 모달에는 You are now leaving the "SECTION NAME" part of "SITE NAME"과 같은 메시지가 포함됩니다. 그러면 사용자는 사용자가 요청을 계속할 수있게 허용하거나 취소하여 사용자를 그대로 유지합니다.

링크의 예는 다음과 같습니다 당신이 leaving-section의 클래스가 내가 위에서 지정한 일을 할 수있는 링크를 일으킬 것이라고 볼 수 있으며, 또한 새로운 탭/창에서 링크를 열 것입니다 그래서 <a href="/interests" title="My Interests" target="_blank" class="leaving-section">My Interests</a>

하지만 사용자는 먼저 사이트의 다른 부분으로 이동한다는 사실을 알고 있다는 사실을 받아 들여야합니다.

문서를 살펴 봤지만 대화 상대가 보이지 않고 div를 표시하고 b) 대화 상자가 만들어져 원래 위치로 보내지는 경우를 보지 못했습니다. 즉 그들이 클릭 한 URL.

$("#leaving-section").dialog({ 
      resizable: false, 
      modal: true, 
      buttons: { 
       "I understand, take me there": function() { 
        $(this).dialog("close"); 
       }, 
       "I want to stay where I am": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

     $('.leaving-section').click(function (event) 
     { 
      event.preventDefault(); 
      var $dialog = $('#leaving-section'); 
      $dialog.dialog('open'); 
     }); 

하지만 대신 사업부는 페이지에 포함되는 JQuery와에 의해 생성되는 모달 원하는 :

이것은 내가 지금까지 무엇을 가지고! 또한 첫 단추를 원래 목적지로 보내려면 어떻게해야합니까?

도와 주신 모든 분들께 감사드립니다. 감사합니다

Answer 1

또는 당신은 또한 사용할 수 있습니다. 이 기능을 작동시키는 열쇠는 확인 기능을 사용하려는 링크 (둘 이상의 링크에서 사용하려는 경우)의 click 이벤트 핸들러에서 dialog을 부분적으로 초기화해야한다는 것입니다. 이는 링크의 대상 URL을 확인 버튼 클릭을위한 이벤트 처리기에 삽입해야하기 때문입니다. CSS 클래스를 사용하여 확인 동작이 필요한 링크를 나타냅니다.

다음은 내 솔루션입니다. 예를 들어 설명하기에 적합합니다.

<div id="dialog" title="Confirmation Required"> 
    Are you sure about this? 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#dialog").dialog({ 
     autoOpen: false, 
     modal: true 
    }); 
    }); 

    $(".confirmLink").click(function(e) { 
    e.preventDefault(); 
    var targetUrl = $(this).attr("href"); 

    $("#dialog").dialog({ 
     buttons : { 
     "Confirm" : function() { 
      window.location.href = targetUrl; 
     }, 
     "Cancel" : function() { 
      $(this).dialog("close"); 
     } 
     } 
    }); 

    $("#dialog").dialog("open"); 
    }); 
</script> 

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a> 
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a> 

나는 당신이 (내 예에서, confirmLink) CSS 클래스와 함께 링크를 생성 할 경우이, 당신을 위해 일한다고 생각합니다.

Answer 2

나는이 플러그인을 Heres

http://jqueryui.com/demos/dialog/#modal-confirmation

Answer 3

당신이 그것을 할 수있는 방법의 예 도움이 될 수 있습니다 생각 :

http://jsfiddle.net/yFkgR/3/

또는 뭔가를 이외의 취소

http://jsfiddle.net/yFkgR/4/

버튼 만 정의 할 수 있습니다. 대화 상자의 스타일을 원하는대로 지정할 수 있습니다. 기본값을 사용했습니다.

은 또한 당신이 좀 걸릴 수 있습니다 HTML을로드 할 아약스를 사용 : 원격 웹 페이지에서 HTML을로드하는 데 사용할 수있는 열려있는 옵션이 있습니다

jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs

. 난 당신이 사업부 그냥

$("<div>");

이 너무 닫는 태그를 생성합니다 일을 만들 수 있습니다 JQuery와. 게시물에 제안 난 그냥 같은 문제를 해결했다

$('a.ajax')