DNN在外部鏈接上打開“離開站點”模版，單擊

Question

新手在這里。 在網站上嘗試了幾個不同的示例，但沒有任何運氣。 我的情況是，我們在整個DNN站點（Evoq 8.5）上都有具有以下格式的鏈接。

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

我試圖打開一個模式，說每次單擊帶有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。 我確定還有其他方法可以執行此操作，但是我們站點上有數百個鏈接，這些鏈接具有我們必須更改的external-link類，並且必須為許多具有不同URL的鏈接打開此模式。

Answer 1

函數的第一行中有一個額外的{ 。 這將導致錯誤，jQuery停止執行，永遠不會到達e.preventDefault（）從而將打開鏈接。 因此，您看不到腳本有錯誤。

其次，我將代碼包裝在$(document).ready(function () 。

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

        //rest of the code
    });
});

Answer 2

最終，如果有人偶然發現了這個問題，就可以解決這個問題。 模態很好，但是我的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和Bootstrap 3之間的區別。