Jquery - Make a UI dialog appear on a href

Question

So I have this right here:

It's a very simple UI Dialog that counts down until my user is redirected. If they click outside of the box it is canceled.

Is there anyway I can create this so that it is done on a URL click?

I also want to pass one parameter in (the url that the user is going to be redirected to)

<!DOCTYPE html>
<html>
<head>

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>



  <script type="text/javascript">
    function setClosed(){
      isClosed=true;
    }
    function alertBlah() {   
       if (!isClosed)
   $(location).attr('href',"http://www.google.com").delay(3000);
}

   //Wait for the document to load
   $(document).ready(function() {
      isClosed=false;

  //Create the dialog and open it
  $("#dialog").dialog();
  $("p.5").fadeOut(0).delay(500).fadeIn(400);
  $("font.4").fadeOut(0).delay(1000).fadeIn(400);
  $("font.3").fadeOut(0).delay(1500).fadeIn(400);
  $("font.2").fadeOut(0).delay(2000).fadeIn(400);
  $("font.1").fadeOut(0).delay(2500).fadeIn(400);
  $("h2.by").fadeOut(0).delay(3000).fadeIn(400);

  setTimeout(alertBlah,3500);

  //Bind to the ui-widget-overlay and watch for when it is clicked
  $('.ui-widget-overlay').live("click", function() {
     //Close the dialog
     $("#dialog").dialog("close");
     setClosed();

  }); 


  });

 </script>
 </head>

 <body style="font-size:62.5%;">




   <div class="ui-widget-overlay" >
      <a href="#" class="close">Leave My Site</a>

      <div id="dialog" class="flora" title="Leaving my site" ><center>Leaving in...
         <font class="5">5..</font>
         <font class="4">4..</font>
         <font class="3">3..</font>
         <font class="2">2..</font>
         <font class="1">1..</font>

  </br>
  <h2 class="by">Good By!</h2>
  </center>
</div>

Jake Dempsey · Accepted Answer · 2011-05-25 02:38:26Z

2

Lets say you have an anchor:

<a href="#" class="close">Leave My Site</a>

You could do something like:

$('a.close').click(function(e){
    //$(this) would be your anchor
    //awesome magic here
    e.preventDefault();
});

The e.preventDefault is the important part as it prevents the anchors default action from happening.

answered May 25, 2011 at 2:38

Jake Dempsey

6,3121 gold badge32 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user646655 Over a year ago

Yeah but how can I create the Dialog. Like i don't understand how I fill the inside of a dialog without associating it with a div tag.

Jake Dempsey Over a year ago

well if you are using jquery ui and already have the dialog done you can 'open' it just by calling $(blah).dialog('open'). that can be what goes in the body of the click handler above.

user646655 Over a year ago

Thanks alot. Sorry I didn't realize that at first.

Code Maverick Over a year ago

+1 per the OP as they wanted to do it for you but didn't have enough rep. =D

Code Maverick · Accepted Answer · 2014-03-14 16:01:19Z

1

Check out this working jsFiddle demo:

You could have the following HTML:

<a href="http://www.google.com">Exit to Google</a>
<a href="http://www.stackoverflow.com">Exit to StackOverflow</a>

Then the existing JavaScript you have in your head section could be modified like so:

function setClosed() { 
    isClosed = true; 
}

function alertBlah() {
    if (!isClosed) { $(location).attr('href', url).delay(3000); } 
}

$(function() {

    $("a").click(function(e) {

        e.preventDefault();

        isClosed = false;
        url = this.href;

        //Create the dialog and open it
        $("#dialog").dialog();
        $("p.5").fadeOut(0).delay(500).fadeIn(400);
        $("font.4").fadeOut(0).delay(1000).fadeIn(400);
        $("font.3").fadeOut(0).delay(1500).fadeIn(400);
        $("font.2").fadeOut(0).delay(2000).fadeIn(400);
        $("font.1").fadeOut(0).delay(2500).fadeIn(400);
        $("h2.by").fadeOut(0).delay(3000).fadeIn(400);

        setTimeout(alertBlah,3500);

        //Bind to the ui-widget-overlay and watch for when it is clicked
        $('.ui-widget-overlay').live("click", function() {
            //Close the dialog
            $("#dialog").dialog("close");
            setClosed();
        });
    }); 
});

edited Mar 14, 2014 at 16:01

answered May 25, 2011 at 2:50

Code Maverick

20.5k12 gold badges65 silver badges117 bronze badges

1 Comment

user646655 Over a year ago

I love you so much. Can you do me a favor and mark up jakes post I don't have enough rep.

Collectives™ on Stack Overflow

Jquery - Make a UI dialog appear on a href

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest