0

Newbie here. Tried a few different examples on the site without any luck. My situation is that we have links across our entire DNN site (Evoq 8.5) that have the following format.

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

I am trying to open a modal that says that you are leaving our site every time a link with the external-link class is clicked. I'm also trying to accomplish this in the DNN skin file so it applies to all pages. Here is what I have right now.

Modal:

<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>

Attempt to show the modal and pass the href of the link to the continue button:

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

This doesn't work in our environment. It just goes straight to the link's href URL. I'm sure there are other ways we could do this, but there are hundreds of links across our site that have the external-link class that we would have to change, and this modal has to be opened for many links with different URLs.

VDWWD
  • 35,079
  • 22
  • 62
  • 79
csunder
  • 1
  • 1
  • Finally got this figured out if anyone stumbles upon it. The modal was fine, but my javascript was incorrect (and had a few dumb mistakes because I'm tired). Here's the final working javascript: – csunder Mar 02 '17 at 22:43

2 Answers2

0

You have an extra { in your function's first row. This causes an error, jQuery stops execution, e.preventDefault() is never reached thus the link will be opened. Because of that you do not see that the script has an error.

Second I would wrap the code in a $(document).ready(function ().

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

        //rest of the code
    });
});
VDWWD
  • 35,079
  • 22
  • 62
  • 79
0

Finally got this figured out if anyone stumbles upon it. The modal was fine, but my javascript was incorrect (and had a few dumb mistakes because I'm tired). Here's the final working 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');
});
});

You can obviously strip out the console log. The main problem was that e.relatedTarget was coming back undefined, so I had the log in there to monitor it. From a little reading this was a difference between Bootstrap 2 & 3.

csunder
  • 1
  • 1