Need modal window "speedbump" to warn users leaving the site before going to 3rd-party links

MyPoint CreditUnion asked on February 19, 2015 19:38

I need modal window "speedbump" to warn users leaving the site before going to 3rd-party links. There are a couple solutions floating around on stackoverflow, etc. For some reason I can not get the desired URL pass to the "Continue" button.

My first question: is there a "Kentico way" to do this? Something to trigger a modal on all http:// links? Anything else within Kentico that I can leverage here?

Second is: how can I pass the URL to the continue button?

Fiddle here (not my code):

https://jsfiddle.net/TYAeD/25/

Correct Answer

MyPoint CreditUnion answered on February 19, 2015 22:10

Been working on this for a couple hours and finally got it to work with the code below!

Now my next issue is how can I "whitelist" certain URLs to avoid the speedbump? Since the whitelist is just a few URLs and the normal URLs are many I may just have the whitelisted URLs point to a Kentico page (so using / instead of http://) and then re-direct that page to the http link.

SLIGHT EDIT HERE:

<script type="text/javascript">
    jQuery(window).load(function() {
        jQuery.expr[":"].external = function(a) {
            return !a.href.match(/^mailto\:/) && !a.href.match(/^tel\:/) && a.hostname != location.hostname

        };
        // OPEN 3RD PARTY SITE IN NEW TAB/WINDOW
        jQuery('#url_link').click(function() {
            window.open(this.href);
            return false;
        });
        // ADD BOOTSTRAP DATA-TOGGLE ATTRIBUTE TO THE LINKS
        jQuery('a:external').attr('data-toggle', 'modal');
        jQuery('a:external').attr('data-target', '#speedbump');
        jQuery("a:external").addClass("ext_link");
        jQuery(function() {
            jQuery('a.ext_link').click(function() {
                var url = jQuery(this).attr('href');
                var title = jQuery(this).attr('title');
console.log(url);
                jQuery('#url_link').attr('href', url);
                jQuery('h3#speedbump-title').replaceWith('<h3 id="speedbump-title">' + title + '</h3>');
                jQuery('#url_link').click(function() {
                    jQuery('#speedbump').modal('hide')
                }); // DESTROY MODAL IF USER CONTINUES
            });
        });
    });
</script>
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal" id="speedbump" role="dialog" tabindex="-1">
<div class="modal-content modal-dialog">
<div class="modal-header"><button class="close" data-dismiss="modal" type="button">&times;</button>
<h3 id="speedbump-title">&nbsp;</h3>
</div>

<div class="modal-body">
<p class="strong"><span style="color: rgb(0, 0, 0);">You&#39;re leaving this website</span></p>

<p><span style="color: rgb(0, 0, 0);">When you click continue you will connect to another website which we do not own or operate.</span></p>
</div>

<div class="modal-footer"><a class="btn btn-primary" id="url_link">Continue</a><span style="color: rgb(0, 0, 0);"> </span><a class="btn" data-dismiss="modal" href="#"><span style="color: rgb(0, 0, 0);">Cancel</span></a></div>
</div>
</div>

1 votesVote for this answer Unmark Correct answer

Recent Answers

kyle shapiro answered on February 20, 2015 21:20

I had something similar to where if a menu button on my site is clicked, it asks for the user's confirmation. I did this using javascript confirm() on the page --> properties --> navigation --> menu actions --> javascript command.

if(confirm("You are now navigating away from myWebSite \n Click ok to continue.")){location.replace("http://WhereYouWantToGo dot com/");}

Hope it helps.

0 votesVote for this answer Mark as a Correct answer

MyPoint CreditUnion answered on February 21, 2015 00:07 (last edited on February 21, 2015 01:47)

Sorry, I didn't put the code in a code block.

2 things that wont work for me with your solution is that I want to utilize the Bootstrap style/functions and also, I don't want to hard-code any URLS.

The solution I posted above does work, it also passes the URL to the continue button now.

Everything works pretty well, this is a good solution for anyone in a corporate environment where you need these "speedbump" warnings.

0 votesVote for this answer Mark as a Correct answer