Добавить ссылку со страницы на Лайтбокс

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

Если я правильно понял, что вы хотите:

• нажмите на ссылку на странице «A» указывает на веб-страницу «B»
• вместо того, чтобы перейти на страницу «B», показать лайтбокс с просьбой подтвердить, прежде чем покинуть страницу «A»
• , если посетитель произнесет «да», затем перейдите на страницу «B», в противном случае закройте лайтбокс и оставайтесь на странице " А»

Если все вышесказанное верно, то я бы установить содержание подтверждения о 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 Перезвони.

Затем связать click к .button селектора (в пределах confirm переменных, как описано выше) в пределах afterShow обратного вызова и решить, какие меры принять, либо:

• получил на страницу «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

---

EDIT (15 февраля 2014):

ОП сказал:

Я при попытке открыть ссылку в новом окне вкладок, когда нажимаем «да»

сделать так, изменить эту часть

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