单击链接后，单击确定取消对话框
[英]OK Cancel dialog after clicking a link
问题描述
I am a beginner with jquery an do not know how to proceed with my project. 
我是jquery的初学者，不知道如何进行我的项目。 What I want to do is to create a dialog box with two buttons OK and Cancel that would pop up after clicking on a link. 我想做的是创建一个带有两个按钮“确定”和“取消”的对话框，该对话框在单击链接后会弹出。 I have fully working example but the problem with it is that I do not like the dialog (example A). 我有一个完整的示例，但是问题是我不喜欢对话框（示例A）。 I have also nice dialog box (example B), but I do not know how to integrate it with a link. 我还有一个漂亮的对话框（示例B），但我不知道如何将其与链接集成。 Can anybody help me with this please? 有人可以帮我吗？
Here is code example A - fully working but not nice :( 这是代码示例A-可以正常运行，但效果不好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Usuwanie produktu</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
</script>
</head>
<body>
<a href="delete.php?id=22" class="confirmation">Link</a>
<script type="text/javascript">
$('.confirmation').on('click', function () {
return confirm('Czy jesteś pewien, że chcesz usunąć wybrany produkt?');
});
</script>
</body>
</html>
And here is the code example B - a nice looking dialog with two buttons OK and Cancel, but without link integration. 这是代码示例B-一个漂亮的对话框，带有两个按钮“确定”和“取消”，但没有链接集成。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Usuwanie produktu</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
window.location.href = "glowny.php?akcja=produkty";
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-message" title="Usuwanie produktu">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Wybrany produkt został pomyślnie usunięty z bazy danych.
</p>
<p>
Naciśnij OK aby kontynuować.
</p>
</div>
</body>
</html>
I am sure this is not too difficult, but I do not have the knowledge that would be sufficient to complete the task. 我确信这并不是很困难，但是我不具备足够的知识来完成任务。
Thanks in advance for help 预先感谢您的帮助
3 个解决方案
解决方案1
2 已采纳 2019-02-01 14:01:00
Try this 尝试这个
$("#dialog-message").hide(); $('.confirmation').on('click', function(e) { e.preventDefault(); $("#dialog-message").dialog({ modal: true, buttons: { Ok: function() { $(this).dialog("close"); window.location.href = "glowny.php?akcja=produkty"; }, Cancel: function() { $(this).dialog("close"); } } }); });
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Usuwanie produktu</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="dialog-message" title="Usuwanie produktu"> <p> <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Wybrany produkt został pomyślnie usunięty z bazy danych. </p> <p> Naciśnij OK aby kontynuować. </p> </div> <a href="delete.php?id=22" class="confirmation">Link</a> <script type="text/javascript"> </script> </body> </html>
解决方案2
0 2019-02-01 14:09:16
You were near to your objective. 您已接近目标。 Your dialog in example B, need a property autoOpen set to false. 示例B中的对话框需要将autoOpen属性设置为false。 It will block the dialog to open when the document load. 加载文档时，它将阻止对话框打开。
Then to do like the Example A, trigger the modal opening. 然后，像示例A一样，触发模式打开。 Just create an event on clicking on the element. 只需在元素上单击创建一个事件。
$("#link").click(function() {
$("#dialog-message").dialog("open");
})
Code Snippest below. 代码如下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Usuwanie produktu</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { $("#dialog-message").dialog({ modal: true, autoOpen: false, buttons: { Ok: function() { $(this).dialog("close"); window.location.href = "glowny.php?akcja=produkty"; }, Cancel: function() { $(this).dialog("close"); } } }); $("#link").click(function() { $("#dialog-message").dialog("open"); }) }); </script> </head> <body> <p id="link"> click on me to open</p> <div id="dialog-message" title="Usuwanie produktu"> <p> <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> Wybrany produkt został pomyślnie usunięty z bazy danych. </p> <p> Naciśnij OK aby kontynuować. </p> </div> </body> </html>
解决方案3
0 2019-02-01 15:46:36
The solution provided by Ashay Mandwarya works fine for me. Ashay Mandwarya提供的解决方案对我来说很好。 Here is the code: 这是代码：
<!DOCTYPE html> <html>
<head> <meta charset="utf-8" /> <title>Usuwanie produktu</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head>
<body> <div id="dialog-message" title="Usuwanie produktu">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Wybrany produkt został pomyślnie usunięty z bazy danych.
</p>
<p>
Naciśnij OK aby kontynuować.
</p> </div>
<a href="delete.php?id=22" class="confirmation">Link</a>
<script type="text/javascript">
$("#dialog-message").hide();
$('.confirmation').on('click', function(e) {
e.preventDefault();
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
window.location.href = "glowny.php?akcja=produkty";
},
Cancel: function() {
$(this).dialog("close");
}
}
}); });
</script>
</body>
</html>
Thank you all for yours replays and help. 谢谢大家的回放和帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.