Jquery-在href上显示一个UI对话框

所以我这里有这个：

这是一个非常简单的UI对话框，它会倒计时，直到我的用户被重定向。如果他们点击框外，它将被取消。

有没有我可以创建这个，这样它就可以在URL点击时完成？

我还想在中传递一个参数（用户将被重定向到的url）

<!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>

假设您有一个锚点：

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

你可以做一些类似的事情：

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

e.preventDefault是重要的部分，因为它可以防止锚点的默认操作发生。

查看此工作jsFiddle演示：

您可以拥有以下HTML：

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

然后，您的头部部分中现有的JavaScript可以这样修改：

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();
        });
    }); 
});

相关内容

最新更新

热门标签：