Traction External Links Speed Bump

Here is the basic markup for how the speed bump is displayed.

<pre>
    <div id="trelsb-external-link-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="trelsb-external-link-modal-message">  

        <p id="trelsb-external-link-modal-message">
            You are about to leave the current site.
        </p>

        <a class="button trelsb-external-link-modal-continue"  tabindex="1" href="https://clickedlinkurl.com" aria-label="Continue">
            Continue
        </a>

        <span class="button trelsb-external-link-modal-close" tabindex="2" aria-label="Close">
            Cancel
        </span>

    </div>
</pre>

You can style the speed bump just like you would any other HTML elements.

In the off chance that you have a link not working with this plugin like you expect it to you can use the trelsb_handle_links function in your own JavaScript file to make the speed bump activate when the link is clicked. Just add a class name to the link and then use the code below.

<pre>
    jQuery(".link_class_name").click(function(event) {
        trelsb_handle_links(event, this)
    });
</pre>