jQuery UI：用戶必須確認或取消的顯示對話框

我的網站上有幾個鏈接，當用戶點擊其中一個鏈接時，需要顯示一個模式對話框。該模式將包含一條消息，如：You are now leaving the "SECTION NAME" part of "SITE NAME"。然後，用戶將接受哪些將允許用戶繼續接受他們的請求，或者取消哪些將使用戶保持在他們所在的位置。jQuery UI：用戶必須確認或取消的顯示對話框

鏈接的一個例子是：<a href="/interests" title="My Interests" target="_blank" class="leaving-section">My Interests</a>

因此，大家可以看到這個類的leaving-section將導致做鏈接上面我所指定，也將在新標籤/窗口中打開鏈接但是用戶必須首先接受他們意識到他們被帶到該網站的另一部分。

我看過文檔，但我沒有看到任何示例，其中a）對話框是在飛行中創建的，而不是隱藏並顯示div，並且b）允許用戶確認並將其發送到其原始位置即他們點擊的網址。

這是我到目前爲止有：

$("#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的，而不是在div被嵌入在頁面中創建的模式！另外我如何獲得第一個按鈕將它們發送到原始目的地？

感謝所有能幫忙的人。由於

來源

2011-08-02 Cameron

最新問題？ – Matt

如何獲取對話框以允許用戶接受併發送到原始URL或取消並保留它們的位置。 – Cameron

取消很簡單，因爲你可以在模態中定義它。去一個網址，但你也定義了，但你會使用類似window.location或location.href – Matt

我不得不解決同樣的問題。實現此功能的關鍵是，dialog必須在click事件處理程序中針對要使用確認功能的鏈接（如果要將其用於多個鏈接）進行部分初始化。這是因爲鏈接的目標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>

我相信，這會爲你工作，如果你能生成與CSS類的鏈接（confirmLink，在我的例子）。

來源

2011-08-02 09:34:52