添加链接从网页到灯箱

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