open new tab only after click popup ok jquery

Question

How to create a script for open a tag href url in new window or tab only after clicking ok button in popup. there are multiple a tags with different urls.

$(document).ready(function() {

  $("[target=_blank]").click(function() {
    $(".popup").toggle();
  });
  $(".cancel").click(function() {
    $(".popup").hide();
  });
});

http://jsfiddle.net/xdfoydy8/4/

Answer 1

Actually, you don't need your jQuery bit to do that, all you have to do is use the JS confirm() function in the onclick event of each of your links, as such :

<a target="_blank" class="intro" href="http://google.com" onclick="return confirm('Popup ?');">to new Window</a><br>
<a target="_blank" class="intro" href="http://yahoo.com" onclick="return confirm('Popup ?');">to new Window</a><br>
<a class="intro" href="#" onclick="return confirm('Popup ?');">same window</a>

Fiddle : https://jsfiddle.net/z57cnnd7/

Answer 2

You can do it in following way:

http://jsfiddle.net/xdfoydy8/5/

$(document).ready(function() {

  $("[target=_blank]").click(function(e) {
    e.preventDefault();
    $(".popup").show();
    $("a.ok").data("hrefData", $(this).attr("href"));
  });
  $(".cancel").click(function() {
    $(".popup").hide();
  });

  $("a.ok").click(function() {
    var href = $(this).data("hrefData");
    if ($.trim(href).length > 0) {
      window.open(href, "_blank");
    }
  });
});

We are setting the clicked href in ok link's $.data() and retrieving it on click of ok click and taking user to clicked href

Answer 3

many ways to do this - but one way is to do it like this

    $("[target=_blank]").click(function(e){
      e.preventDefault();
      var link = $(this).attr('href');
      $(".popup").toggle();
      $('.ok').attr('href',link);
      $('.ok').attr('target',"_blank");
    });

This will kust make your "ok" link into the link that you originally clicked. remember to change the reversal as well.

Answer 4

You'll have to intercept the initial event with e.preventDefault and have it re-routed through the confirm pop-up modal.

$(document).ready(function(){
    $("[target=_blank]").click(function(e) {
        e.preventDefault(); // stops the redirecting
        openToggle(e) // pass the initial even to a new function
    });
});

function openToggle(target) {
    $(".popup").toggle();

    $('.ok').click(function() {
        window.location = target.currentTarget.href;
    });

    $(".cancel").click(function() {
        $(".popup").hide();
    });
};

Haven't tested this yet, i'll update if neccesary

Answer 5

You need to use e.preventDefault() to stop default behavior of anchor tag.

$(document).ready(function(){

    $(".links a[target=_blank]").click(function(e){
    e.preventDefault();
    $(".popup .ok").attr("href",$(this).attr("href"));
        $(".popup").toggle();
    });
$(".cancel,.ok").click(function(){
        $(".popup").hide();
    });
});

Here is fiddle

http://jsfiddle.net/etqzyyob/1/