php 打开链接前的 jQuery 对话框确认
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11532738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery dialog confirm before opening link
提问by rzb
I have a table populated with data from the database, where each row has a cell with an anchor element inside. This anchor would lead to the same page but with a query string telling php which row contains the data it should delete.
我有一个用数据库中的数据填充的表，其中每一行都有一个单元格，里面有一个锚元素。这个锚点会指向同一个页面，但是有一个查询字符串告诉 php 哪一行包含它应该删除的数据。
I need a jQuery dialog box to be opened when the user clicks an anchor asking him to confirm his intentions BEFORE loading the url. The 'cancel' button should close the dialog and do nothing. The 'OK' button should then let the url open.
当用户单击锚点要求他在加载 url 之前确认他的意图时，我需要打开一个 jQuery 对话框。“取消”按钮应该关闭对话框并且什么都不做。然后，“确定”按钮应该让 url 打开。
Any help is highly appreciated.
任何帮助都受到高度赞赏。
// edit with 'what I have tried'. It's my first time messing with jQuery and time for studying is running out... =(
// 使用“我尝试过的方法”进行编辑。这是我第一次接触 jQuery，学习的时间已经不多了... =(
jQuery(document).ready(function(){
var $dialog = jQuery('<div class='msg_dialog'></div>')
.html('Are you sure you want to do this?')
.dialog({
autoOpen: false,
title: 'Confirm action',
buttons: [{
text: "Cancel",
click: function(){
jQuery(this).dialog("close");
}
}] // didn't even try the OK button since I couldn't even get the dialog opened
});
jQuery('#confirm_del').click(function(){
$dialog.dialog('open');
return false;
});
});
回答by Andrew Whitaker
$("a").on("click", function(e) {
var link = this;
e.preventDefault();
$("<div>Are you sure you want to continue?</div>").dialog({
buttons: {
"Ok": function() {
window.location = link.href;
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
Example:http://jsfiddle.net/uRGJD/
示例：http : //jsfiddle.net/uRGJD/
(Redirecting to Google won't work on JSFiddle but should work on a normal page)
（重定向到 Google 在 JSFiddle 上不起作用，但应该在普通页面上工作）
回答by Leon
how about using:
如何使用：
<a href="<?php echo 'your_url'.'?query_string='.$query_string ?>" onclick="return confirm('Are your sure?')">
Go
</a>
回答by gilly3
You can create a dialog that creates the buttons for you, but I like the approach where you create the buttons yourself so that you can use real links instead of using javascript to navigate.
您可以创建一个对话框来为您创建按钮，但我喜欢您自己创建按钮的方法，这样您就可以使用真正的链接而不是使用 javascript 进行导航。
Working demo:http://jsfiddle.net/gilly3/sdzbB/
工作演示：http : //jsfiddle.net/gilly3/sdzbB/
<div id="dialog-confirm">
<div class="message">Are you sure?</div>
<div class="buttons">
<a class="cancel" href="#">Cancel</a>
<a class="ok" href="#">Ok</a>
</div>
</div>
$("#dialog-confirm").dialog({ autoOpen: false }).find("a.cancel").click(function(e){
e.preventDefault();
$("#dialog-confirm").dialog("close");
});
$("a[href]:not(#dialog-confirm a)").click(function(e) {
e.preventDefault();
$("#dialog-confirm")
.dialog("option", "title", $(this).text())
.dialog("open")
.find("a.ok").attr({
href: this.href,
target: this.target
});
});
The benefit to using a real link instead of location.href = link, is that you get all kinds of built in goodies, like mouse shortcuts to open the link in a new tab, the ability to drag the link to the bookmarks bar or desktop, the ability to copy the link to the clipboard, keyboard access via tab, etc.
使用真实链接而不是 , 的好处location.href = link是您可以获得各种内置的好东西，例如在新选项卡中打开链接的鼠标快捷方式、将链接拖到书签栏或桌面的能力、复制的能力剪贴板的链接，通过选项卡的键盘访问等。
回答by Bishnu Paudel
You should prevent default behavior of the link which can be done like this code.
您应该防止链接的默认行为，这可以像此代码一样完成。
$('.tableId tr td a').click(function(event){
//code to display confirmation dialog
event.preventDefault();
}
You can use this JQuery plugin for confirmation dialog.http://jqueryui.com/demos/dialog/#modal-confirmation
您可以使用此 JQuery 插件进行确认对话框。http://jqueryui.com/demos/dialog/#modal-confirmation
