Jquery 确认示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3383546/
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 Confirmation samples
提问by maas
I would like to have more samples regarding the jquery confirmation box.
我想要更多关于 jquery 确认框的示例。
I have learned how to show the confirmation dialogue box through the below example:
我已经通过以下示例学习了如何显示确认对话框：
http://www.webstuffshare.com/2010/03/jquery-plugin-jconfirmaction/
http://www.webstuffshare.com/2010/03/jquery-plugin-jconfirmaction/
But, I need more colorful and attractive samples, can you please help?
但是，我需要更多色彩鲜艳和有吸引力的样品，你能帮忙吗？
回答by Shaoden
$(document).ready(function () {
$("#btnSend").click(function (e) {
var result = window.confirm('Are you sure?');
if (result == false) {
e.preventDefault();
};
});
});
回答by mnu-nasir
visit the following websites. you will find so many confirmation box developed by jquery plugin library.
访问以下网站。你会发现很多jquery插件库开发的确认框。
回答by Boniface Pereira
Jquery confirmation dialogs must not be that hard to make, i have made a confirmation plugin myself, jquery-confirmthat supports modern features.
Jquery 确认对话框一定不难制作，我自己制作了一个确认插件，支持现代功能的jquery-confirm。
First of all you must think of how to initialize your confirm.
directly pluginname({title: 'amazing'});
or binding to a element $('.e').pluginname({title:'amazing'})
首先，您必须考虑如何初始化您的确认。
直接pluginname({title: 'amazing'});
或绑定到元素$('.e').pluginname({title:'amazing'})
Then where do u append the plugins HTML content.
You can provide the option to the user, and set it to $('body')
那么你在哪里附加插件 HTML 内容。您可以向用户提供该选项，并将其设置为$('body')
Opening and closing your confirm matters too,
can be done by
JS or CSS.
for example your html markup is
<div class="myplugin-container">The confirmation content goes here</div>
You set a CSS rule
打开和关闭您的确认事项也可以通过
JS 或 CSS来完成。例如你的 html 标记是
<div class="myplugin-container">The confirmation content goes here</div>
你设置了一个 CSS 规则
.myplugin-container{
visibility: hidden;
transition: all .4s; //transition last for .4s.
transform: scale(0); //by default the modal is scaled to 0.
}
.myplugin-container.show{
visibility: visible;
transform: scale(1);
}
The moment you load your confirmation plugin's html in the DOM it will be hidden because of the above rules.
and in you JS code you add a class to your .myplugin-container$('.myplugin-container').addClass('show')
At this point your confirmation dialog will have a opening animation.
that goes from Smaller to normal.
当您在 DOM 中加载确认插件的 html 时，由于上述规则，它将被隐藏。并在您的 JS 代码中添加一个类到您的.myplugin-container$('.myplugin-container').addClass('show')
此时您的确认对话框将有一个打开动画。从较小到正常。
回答by cllpse
I'd suggest you take a look at jQuery UI's dialog widget. jQuery UI is jQuery's official user interface library. So you're sure to avoid The Bathroom Wall of Code:)
我建议你看看jQuery UI's dialog widget。jQuery UI 是 jQuery 的官方用户界面库。所以你一定要避免代码的浴室墙:)
Also; the documentation and community around this library is huge. So if you we're to get stuck; you are sure to get help.
还; 围绕这个库的文档和社区是巨大的。所以如果你我们被卡住了；你一定会得到帮助。
回答by Manie
Try this example...
试试这个例子...
In your view page where the delete button is present, type this code..
在显示删除按钮的视图页面中，键入此代码..
<div id="dialog-confirm" title="Remove this?">
<p align="justify">
<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
This will be permanently deleted in our system and cannot be recovered. Do you want to continue?
</p>
</div>
Trigger example of delete button (put this in your js file):
删除按钮的触发示例（将其放入您的 js 文件中）：
$("#deletebutton").click(function() {
$('#dialog-confirm').dialog('open');
}
// jquery-ui confirm dialog box
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
modal: true,
buttons: {
'Remove': function() { // remove what you want to remove
// do something here
},
Cancel: function() {
$(this).dialog('close');
}
}
});
Note: Do not forget to include jquery script and jquery-ui plugin script in your header file. This will not work without this files.
注意：不要忘记在头文件中包含 jquery 脚本和 jquery-ui 插件脚本。如果没有这些文件，这将无法工作。
You can download the jquery-ui plugin here.
你可以在这里下载 jquery-ui 插件。
If you have further questions, just post comments. :D
如果您还有其他问题，请发表评论。:D
