添加鏈接從網頁到燈箱

Question

我想要做的是，在你點擊鏈接，將讓你到其他網頁是我想要添加燈箱所有「'添加'類」鏈接，它會通知你你要離開這個頁面。在那個燈箱中，我想要那個鏈接出現，你只是用來打開這個燈箱。

我到目前爲止完成的工作是讓燈箱出現，但是它將頁面中的孔鏈接剪下並粘貼到燈箱中，如果您想單擊該鏈接則不會發生任何事情，因爲它試圖打開燈箱再次。

HTML：

<div class="add"><a href="http://www.jsfiddle.net/" id="add_btn" target="_blank" rel="nofollow" class="btn">Add</a></div> 

代碼：

$(".add").fancybox({ 
    openEffect : 'none', 
    closeEffect : 'none', 
    afterLoad : function() { 

this.inner.prepend('<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit, mi sed sollicitudin hendrerit, elit elit tristique velit</h4>'); 

this.add = '<a href="' + this.href + '"></a>' 
    } 
}); 

演示：http://jsfiddle.net/2pyAP/

Answer 1

如果我理解正確的，你想要的是：

• 單擊頁面中的鏈接指向webpa的「A」 ge「B」
• 而不是去頁面「B」，顯示一個燈箱在離開頁面前請求確認「A」
• 如果訪問者說「是」，則進入頁面「B」，否則關閉lightbox和留在頁面的「A」

如果上述所有是正確的，那麼我會設置像一個變量中的fancybox的確認內容：

var confirm = "<div class='confirm'>" + 
    "<p>You are about to leave this page.</p>" + 
    "<p>Are you sure you want to do that?</p><br />" + 
    "<a href='#' class='button yes'>Yes</a>" + 
    "<a href='#' class='button no'>no</a>" + 
    "</div>"; 

隨後趕上的href屬性的值在另一個變量中點擊鏈接，使用afterLoad回調。

然後綁定afterShow回調中的click到.button選擇（如上confirm變量中），並決定採取什麼行動，無論是：

• 得頁「B」
• 密切的fancybox而留在頁面上 「A」

假設你有一個像這樣的鏈接：

<a href="http://www.jsfiddle.net/" target="_blank" rel="nofollow" class="fancybox">Add</a> 

...這裏的代碼可以這樣做：

jQuery(document).ready(function ($) { 
    $(".fancybox").fancybox({ 
     type: "html", // because the content will be the "confirm" variable 
     modal: true, // avoids closing fancybox but clicking "yes" or "no" 
     afterLoad: function() { 
      link = this.href; // page "B" URL 
      this.content = confirm; // set fancybox content 
     }, 
     afterShow: function() { 
      // bind click to both buttons yes and no 
      $(".button").on("click", function (event) { 
       if ($(event.currentTarget).hasClass("yes")) { 
        location.href = link; // go to page "B" 
       } else if ($(event.currentTarget).hasClass("no")) { 
        $.fancybox.close(); // close fancybox and stay in page "A" 
       } 
      }); 
     } 
    }); 
}); 

見JSFIDDLE

---

編輯（2014年2月15日）：

的OP說：

我現在嘗試在單擊「是」時在新選項卡窗口中打開鏈接

這樣做，改變這部分

if ($(event.currentTarget).hasClass("yes")) { 
    location.href = link; // go to page "B" 
} 

這個

if ($(event.currentTarget).hasClass("yes")) { 
    //location.href = link; // go to page "B" 
    window.open(link); // open in a new tab 
    $.fancybox.close(); // optional, otherwise fancybox will remain open 
} 

見更新JSFIDDLE