Question

所以我就在这里：

这是一个非常简单的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>

Answer 1

让我们说你有一个锚：

<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是重要部分，因为它可以防止锚点默认操作发生。

Answer 2

的 Check out this working jsFiddle demo: 的

您可以使用以下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(); }); }); });

Jquery - 在href上显示UI对话框

2 个答案: