0

新手来了 在网站上尝试了几个不同的示例，但没有任何运气。我的情况是，我们的整个 DNN 站点（Evoq 8.5）都有以下格式的链接。

<a href="www.site.com" class="external-link">

我正在尝试打开一个模式，表示每次单击带有外部链接类的链接时您都会离开我们的网站。我也在尝试在 DNN 皮肤文件中完成此操作，因此它适用于所有页面。这是我现在所拥有的。

模态：

<div id="modalExternalLink" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <span class="modal-title">Thank you for visiting our site.</span>
        </div>
        <div class="modal-body">
          <p> You are now leaving our website.</p>
            <div class="button-container">
                <button type="button" id="btnContinue" class="btn-continue" style="margin-right:10px;">Continue</button>
                <button type="button" class="modal-button" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

尝试显示模态并将链接的 href 传递给继续按钮：

$('.external-link').click(function(e) {{
    e.preventDefault();
    var link = (e.relatedTarget).attr('href');
    $("#btnContinue").attr('href', link);
    $("#modalExternalLink").modal('show');
});

这在我们的环境中不起作用。它直接进入链接的href URL。我敢肯定还有其他方法可以做到这一点，但是我们网站上有数百个链接具有我们必须更改的外部链接类，并且必须为许多具有不同 URL 的链接打开此模式。

4

2 回答 2

0

{你的函数的第一行有一个额外的。这会导致错误，jQuery 停止执行，e.preventDefault() 永远不会到达，因此链接将被打开。因此，您看不到脚本有错误。

其次，我会将代码包装在$(document).ready(function ().

$(document).ready(function () {
    $('.external-link').click(function (e) {
        e.preventDefault();

        //rest of the code
    });
});
于 2017-03-02T22:44:01.167 回答
0

终于弄明白了，如果有人偶然发现它。模态很好，但我的 javascript 不正确（因为我累了，所以出现了一些愚蠢的错误）。这是最终的工作javascript：

$(document).ready(function(e){
$('.external-link').on('click', function (e) {
e.preventDefault();
console.log($(e.currentTarget).attr('href'));
document.getElementById( "btnContinue" ).setAttribute( "onClick", (       "javascript:window.location.href=\"" + $(e.currentTarget).attr('href') + "\"") );
$('#modalExternalLink').modal('show');
});
});

您显然可以删除控制台日志。主要问题是 e.relatedTarget 回来未定义，所以我在那里登录以监视它。从一点点阅读来看，这是 Bootstrap 2 和 3 之间的区别。

于 2017-03-02T22:49:33.693 回答