Back

Technologies:

javascriptjavascript
htmlhtml
jqueryjquery
avatar
Tolerim
a month ago

How can I trigger a popup when clicking on a third-party URL?

My goal is to create a jQuery code for an external popup. I have implemented the following code:

However, this code only works when the anchor tag has the "external" class. Is there an alternative method or hack to achieve this functionality?

$("a").on('click', function (e) {
    if ($(this).hasClass('external')) {
        e.preventDefault();
        var href_val = $(this).attr('href');
        $('.popupHolder').show();
        $('.popupHolder h3 span').html(href_val);
    }
});
$("button.proceed").on('click', function (e) {
    window.location.href = $('.popupHolder h3 span').html();
});
$("button.cancel").on('click', function (e) {
    $('.popupHolder').hide();
});
.popupHolder {
    display: none;
    position:fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
    <h1 id="back">Home</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard
        dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
        specimen
        book. <a class="external" href="https://www.google.com/">Google.com</a> <a href="#about">Hash Link About</a>
    </p>
</div>
<div class="content">
    <h2 id="about">About</h2>
    <p>Lorem Ipsum is simply dummy text of the <a class="external" href="https://www.facebook.com/">Facebook.com</a>
        printing and
        typesetting industry. Lorem Ipsum has been the industry's
        standard
        <a href="#back">Back to Top</a>
    </p>
</div>
<div class="content">
    <p><a href="https://www.twitter.com/">Twitter.com</a>
        <a href="#back">Back to Top</a>
    </p>
</div>
<div class="popupHolder">
    <h3>Do you want to visit <span></span>?</h3>
    <button class="proceed">Proceed</button>
    <button class="cancel">Cancel</button>
</div>

Answers(2)
avatar
Vogi
a month ago
Verified Answer
You can use the following code to open an external popup using jQuery: 
$("a").on('click', function (e) {
    if ($(this).hasClass('external')) {
        e.preventDefault();
        var href_val = $(this).attr('href');
        $('.popupHolder').show();
        $('.popupHolder h3 span').html(href_val);
    }
});
However, this code only works when the anchor tag has the "external" class. If you want to open a popup for all external links, you can use the following code: 
$("a").on('click', function (e) {
    var href_val = $(this).attr('href');
    if (href_val.indexOf("http") >= 0) {
        e.preventDefault();
        $('.popupHolder').show();
        $('.popupHolder h3 span').html(href_val);
    }
});
This code will check if the href attribute of the clicked link contains "http". If it does, it will prevent the default behavior of the link and show the popup. I hope this helps! Let me know if you have any other questions.

Sources

How to open an external html page as a popup in jquery mobile?Using jQuery to Generate Modal Pop-Up when Clickedload external URL into modal jquery ui dialog - Stack OverflowOpening an external website in a modal popup - Stack Overflow
avatar
Tolerim
a month ago
The code you shared is checking whether the clicked anchor tag has a class 'external'. If it doesn't have the class 'external', then the popup is not shown. If you want to show the popup even for anchor tags without the 'external' class, you can simply remove the if statement as follows: 
$("a").on('click', function (e) {
    e.preventDefault();
    var href_val = $(this).attr('href');
    $('.popupHolder').show();
    $('.popupHolder h3 span').html(href_val);
});
This code will show the popup for all anchor tags on click.
;