Question

我想有关于jquery确认框的更多示例。

我已经学会了如何通过以下示例显示确认对话框：

http://www.webstuffshare.com/2010/03/jquery-plugin-jconfirmaction/

但是，我需要更多彩色和有吸引力的样品，你能帮忙吗？

Answer 1

   $(document).ready(function () {

        $("#btnSend").click(function (e) {
            var result = window.confirm('Are you sure?');
            if (result == false) {
                e.preventDefault();
            };
        });
    });

Answer 2

访问以下网站。你会发现jquery插件库开发的这么多的确认框。

http://craftpip.github.io/jquery-confirm/

Answer 3

我建议你看看jQuery UI's dialog widget。 jQuery UI是jQuery的官方用户界面库。所以你一定要避免The Bathroom Wall of Code：）

也;这个图书馆的文档和社区是巨大的。所以，如果你我们被困住了;你一定会得到帮助。

Answer 4

试试这个例子......

在存在删除按钮的视图页面中，输入此代码..

<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>

触发删除按钮的示例（将其放入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');
         }
   }
});

注意：不要忘记在头文件中包含jquery脚本和jquery-ui插件脚本。没有这些文件，这将无法正常工作。

您可以下载jquery-ui插件here。

如果您还有其他问题，请发表评论。：d

Answer 5

您可以查看jAlerts和演示here

我已经使用了很长时间并对此感到满意。您可以自定义您想要的方式并跨浏览器工作。

Answer 6

Jquery确认对话框一定不难做到，我自己制作了一个确认插件，jquery-confirm支持现代功能。

首先，您必须考虑如何初始化您的确认。
直接pluginname({title: 'amazing'});
或绑定到元素$('.e').pluginname({title:'amazing'})

然后你在哪里附加插件HTML内容。您可以向用户提供该选项，并将其设置为$('body')

打开和关闭您的确认事项，可以通过
完成 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);
}

当您在DOM中加载确认插件的html时，由于上述规则，它将被隐藏。在你的JS代码中，你向.myplugin-container添加了一个类
$('.myplugin-container').addClass('show')
此时，您的确认对话框将有一个开始动画。从小到正常。

Jquery确认样本

6 个答案: