Question 118693 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Open popup when I click on third party URL

I am trying to build external popup code with jQuery. I have used below code to do the same.

The problem is if I have not added specified class external to the anchor it will not open the popup.

Is there any alternative for the below or trick to do this?

$("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>
Tags:

2

Answers


  1. 0

    You have added the condition in the script that if element has external class then only popup will be shown
    just remove that condition

    $("a").on('click', function (e) {
        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();
});
    Login or Signup to reply.
  2. 0

    Here you need to check the current href value is with same host. If that so then it will show the popup as per required.

    Else it will show directly opens the url without appearing the popup.

    Try below Code

    $(document).on('click', 'a', function (e) {
    var a_id = $(this).attr('id');
    var href_val = $(this).attr('href');

    if (href_val[0] != '#' && href_val != undefined) {
        var j = href_val.indexOf("://");
        var host = "";
        for (i = j + 3; i < href_val.length; i++) {
            if (href_val.charAt(i) != '/') {
                host = host + "" + href_val.charAt(i);
            } else {
                break;
            }
        }
        var my_url = window.location.hostname;
        if (my_url != host) {
            if (a_id == undefined) {
                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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search