BootstrapDialog模态框

发布时间:2017-7-1 11:36:31编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"BootstrapDialog模态框 ",主要涉及到BootstrapDialog模态框 方面的内容,对于BootstrapDialog模态框 感兴趣的同学可以参考一下。

5最近是比较烦直接使用Bootstrap里面的模态框,满屏都是模态框代码,看得心烦。然后想起以前使用的BootstrapDialog.show()的方式,挺简单好用的。然后就拿出来分享一下。

1.下载bootstrap-dialog插件

      可以在github下载,下载地址:https://github.com/nakupanda/bootstrap3-dialog

      也可以在vs的NuGet搜索bootstrap-dialog下载

2.新建一个mvc项目,命名为BootstrapDialog,通过NuGet搜索bootstrap-dialog下载bootstrap3-dialog,将添加如下文件

3.在App_Start文件下的BundleConfig中添加绑定,如下

4.在Hone控制器中添加DialogDemo方法,并添加DialogDemo试图用来展示

5.DialogDemo界面代码如下:

@{
    ViewBag.Title = "DialogDemo";
}

<h2>DialogDemo</h2>
<button class="btn btn-success" id="alert">BootstrapDialog.alert()</button>
<button class="btn btn-primary" id="show">BootstrapDialog.show()</button>
<button class="btn btn-danger" id="confirm">BootstrapDialog.confirm()</button>
<button class="btn btn-primary" id="load">BootstrapDialog 加载远程页面</button>
@section Scripts { 
<script type="text/javascript">
    $('#show').click(function () {
        BootstrapDialog.show({
            title: '提示',
            message: '请输入验证码',
            closeable: true,
            buttons: [{
                label: 'Message 1',
                action: function (dialog) {
                    dialog.setMessage('Message 1');
                }
            }, {
                label: '确定',
                action: function (dialog) {
                    dialog.close();
                }
            }]
        });
    });
    $('#alert').click(function () {
        BootstrapDialog.alert({
            type: BootstrapDialog.TYPE_WARNING,
            title: '提示',
            message: "系统错误!",
            closeable: true,
            buttonLabel: "确定"
        });
    });
    $('#confirm').click(function () {
        BootstrapDialog.confirm(
               {
                   title: '删除提示',
                   message: '是否确定删除?',
                   type: BootstrapDialog.TYPE_WARNING,
                   closable: true,
                   draggable: true,
                   btnCancelLabel: '取消',
                   btnOKLabel: '删除', // <-- Default value is 'OK',
                   btnOKClass: 'btn-warning',
                   callback: function (result) {
                       if (result) {
                           $.ajax({
                               type: "POST",
                               url: "/Admin/SMS/Delete",
                               data: { id: id },
                               dataType: "json",
                               success: function (data) {
                                   if (data.result == true) {
                                        //
                                   }
                                   else {
                                       BootstrapDialog.alert({
                                           type: BootstrapDialog.TYPE_WARNING,
                                           title: '提示',
                                           message: data.message,
                                           buttonLabel: "确定"
                                       });


上一篇:(五)HttpClient 连接超时及读取超时
下一篇:go git 安装配置与使用 (windows 7 64bit)

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款