Jquery - 在 href 上显示 UI 对话框
[英]Jquery - Make a UI dialog appear on a href
问题描述
So I have this right here:
所以我在这里有这个：
It's a very simple UI Dialog that counts down until my user is redirected.这是一个非常简单的 UI 对话框，它会倒计时直到我的用户被重定向。 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?无论如何我可以创建它以便在 URL 点击上完成？
I also want to pass one parameter in (the url that the user is going to be redirected to)我还想传入一个参数（用户将被重定向到的 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>
2 个解决方案
解决方案1
2 2011-05-25 02:38:26
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. e.preventDefault 是重要的部分，因为它可以防止锚点默认操作的发生。
解决方案2
1 已采纳 2011-05-25 02:50:07
Check out this working jsFiddle demo:查看这个有效的 jsFiddle 演示：
You could have the following HTML:您可能有以下 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:然后可以像这样修改头部中现有的 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();
});
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.