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: "确定"
});
}
}
});
}
}
});
}); $("#load").click(function () {
BootstrapDialog.show({
title: '加载远程页面',
message: function (dialog) {
var $message = $('<div></div>');
var pageToLoad = dialog.getData('pageToLoad');
$message.load(pageToLoad);
return $message;
},
size: BootstrapDialog.SIZE_WIDE,
cssClass: "fade",
closeable: true,
data: {
'pageToLoad': '/Home/Load?msg=' + '我来自遥远的地方...'
}
});
});
</script>
}

6.Home控制器Load方法

public PartialViewResult Load(string msg)
{
return PartialView("LoadPartial", msg);
} view: @model string
<h2>这是远程加载的局部页</h2>
<p>@Model</p>

7.封装BootstrapDialog

function ShowDailog(title,url,success) {
BootstrapDialog.show({
title: title,
type: BootstrapDialog.TYPE_DEFAULT,
size: BootstrapDialog.SIZE_WIDE,
cssClass: "fade",
closeable: true,
message: function (dialog) {
var $message = $('<div></div>');
var pageToLoad = dialog.getData('pageToLoad');
$message.load(pageToLoad);
return $message;
},
data: {
'pageToLoad': url,
},
buttons: [{
label: '<i class="fa fa-close"></i> 取消',
action: function (dialog) {
dialog.close();
}
}, {
label: '<i class="fa fa-check"></i> 确定',
cssClass: 'btn btn-primary',
action: function (dialog) {
success(dialog);
}
}]
});
}

8.调用封装的ShowDailog

function AddMemberSales(t) {
var $this = $(t);
var type = @((int)PositionType.Member);
var parentId =$this.data('key');
var url = '@Url.Action("AddSalesPerson","PersonStruct")?type=' + type + '&parentId=' + parentId;
ShowDailog('添加销售人员', url,
function (dailog) {
var data = $('#team').serialize();
$.ajax({
type: "POST",
url: "@Url.Action("AddSalesPerson", "PersonStruct")",
data: data,
dataType: "json",
success: function (result) {
if (result.Succeeded) {
toastr.success("添数据成功!")
setTimeout(function () {
//self.location.reload(true);
toastr.clear();
}, );
$("#squadMemberTmpl").tmpl(result.ReturnValue).insertBefore($this); }
else {
toastr.error(result.ErrorMessage)
}
},
error: function () {
toastr.error('未知异常导致请求失败,请重试.')
}
});
dailog.close();
});
}

BootstrapDialog模态框的更多相关文章

  1. bootstrap3-dialog:更强大、更灵活的模态框(封装好的模态框)

    用过bootstrap框架的同学们都知道,bootstrap自带的模态框用起来很不灵活,可谓鸡肋的很.但nakupanda开源作者封装了一个更强大.更灵活的模态框——bootstrap3-dialog ...

  2. bootstrap模态框和select2合用时input无法获取焦点(转)

    在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的  tabindex="-1&qu ...

  3. bootstrap3-dialog:更强大、更灵活的模态框

    用过bootstrap框架的同学们都知道,bootstrap自带的模态框用起来很不灵活,可谓鸡肋的很.但nakupanda开源作者封装了一个更强大.更灵活的模态框——bootstrap3-dialog ...

  4. js控制Bootstrap 模态框(Modal)插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  5. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  6. boostrap 模态框

    <div class="modal fade" id="myModal" tabindex="-1" role="dialo ...

  7. 解决bootstrap模态框内输入框无法获取焦点

    bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可

  8. 使用RequireJs和Bootstrap模态框实现表单提交

    下面我将使用requirejs结合模态框实现三五行代码部署表单提交操作. 传统开发思路如下:

  9. 使用js实现显示系统当前时间并实现倒计时功能并触发模态框(遮罩)功能

    常常在我们的网页中需要倒计时来触发一些函数,例如遮罩等,在本项目中,通过使用jquery,bootstrap,实现了显示系统当前时间,并且实现了倒计时的功能,倒计时实现后将会弹出模态框(遮罩层).模态 ...

随机推荐

  1. Zabbix分布式配置

    Zabbix是一个分布式监控系统,它可以以一个中心点.多个分节点的模式运行,使用Proxy能大大的降低Zabbix Server的压力,Zabbix Proxy可以运行在独立的服务器上,安装Zabbi ...

  2. SSH的理解

    SSH的利用,通俗的讲就是一个网络传输数据的加密协议,目前有一些基于SSH的构建了服务器-客户端的软件工具,在Windows上装一个客户端,Linux上则为服务端,这样就可以把Windows上写的内容 ...

  3. 【LeetCode OJ 34】Search for a Range

    题目链接:https://leetcode.com/problems/search-for-a-range/ 题目:Given a sorted array of integers, find the ...

  4. Vim 批量替换

    假设在非Win系统下. 想批量替换文本不再是Ctrl+F那么简单了, 一般用Vim来做批量替换, 略微复杂点: 比如将192.168.0.1替换为192.168.0.2 :%s/192.168.0.1 ...

  5. [Android] 使用Matrix矩阵类对图像进行缩放、旋转、对照度、亮度处理

        前一篇文章讲述了Android拍照.截图.保存并显示在ImageView控件中,该篇文章继续讲述Android图像处理技术,主要操作包含:通过打开相冊里的图片,使用Matrix对图像进行缩放. ...

  6. bzoj4873: [Shoi2017]寿司餐厅(最大权闭合子图)

    4873: [Shoi2017]寿司餐厅 大难题啊啊!!! 题目:传送门 题解:一眼题是网络流,但还是不会OTZ,菜啊... %题解... 最大权闭合子图!!! 好的...开始花式建边: 1.对于每个 ...

  7. bzoj1831: [AHOI2008]逆序对(DP+双精bzoj1786)

    1831: [AHOI2008]逆序对 Description 小可可和小卡卡想到Y岛上旅游,但是他们不知道Y岛有多远.好在,他们找到一本古老的书,上面是这样说的: 下面是N个正整数,每个都在1~K之 ...

  8. SparkCore基础(一)

    * SparkCore基础(一) 学习Spark,首先要熟悉Scala,当然你说你会Python或者Java能不能玩Spark?能!但是不推荐,首推Scala,因为Scala非常便捷,而且Scala有 ...

  9. Bayes++ Library入门学习之熟悉class-Bayesian_filter_base(2)

    前面我们已经熟悉了Bayesian_filter::Bayes_filter_base和其子类的击继承关系,接下来我们开始学习该类的实现. bayesFlt.hpp文件为其实现主体,首先是两个常规的头 ...

  10. GoldenGate V11.1数据复制限制

    以下对goldengate数据复制的限制情况进行说明. 不支持文件等非结构化数据复制 GoldenGate依赖对于数据库日志的解析获取数据变化,因此只能支持数据库中的数据变化复制,无法支持文件等非结构 ...