Bootstrap：弹出框和提⽰框效果以及代码展⽰
前⾔：对于Web开发⼈员，弹出框和提⽰框的使⽤肯定不会陌⽣，⽐如常见的表格新增和编辑功能，⼀般常见的主要有两种处理⽅式：⾏内编辑和弹出框编辑。在增加⽤户体验⽅⾯，弹出框和提⽰框起着重要的作⽤，如果你的系统有⼀个友好的弹出提⽰框，⾃然能给⽤户很好的页⾯体验。前⾯⼏章介绍了bootstrap的⼏个常⽤组件，这章来看看bootstrap⾥⾯弹出框和提⽰框的处理。总的来说，弹出提⽰主要分为三种：弹出框、确定取消提⽰框、信息提⽰框。本篇就结合这三种类型分别来介绍下它们的使⽤。
⼀、Bootstrap弹出框
使⽤过JQuery UI的园友们应该知道，它⾥⾯有⼀个dialog的弹出框组件，功能也很丰富。与jQuery UI的dialog类似，Bootstrap⾥⾯也内置了弹出框组件。打开bootstrap ⽂档可以看到它的dialog是直接嵌⼊到bootstrap.js和bootstrap.css⾥⾯的，也就是说，只要我们引⼊了bootstrap的⽂件，就可以直接使⽤它的dialog组件，是不是很⽅便。本篇我们就结合新增编辑的功能来介绍下bootstrap dialog的使⽤。废话不多说，直接看来它如何使⽤吧。
1、cshtml界⾯代码
1 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
2 <div class="modal-dialog" role="document">
3 <div class="modal-content">
4 <div class="modal-header">
5 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
6 <h4 class="modal-title" id="myModalLabel">新增</h4>
7 </div>
8 <div class="modal-body">
9
10 <div class="form-group">
11 <label for="txt_departmentname">部门名称</label>
12 <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" placeholder="部门名称">
13 </div>
14 <div class="form-group">
15 <label for="txt_parentdepartment">上级部门</label>
16 <input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment" placeholder="上级部门">
17 </div>
18 <div class="form-group">
19 <label for="txt_departmentlevel">部门级别</label>
20 <input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel" placeholder="部门级别">
21 </div>
22 <div class="form-group">
23 <label for="txt_statu">描述</label>
24 <input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="状态">
25 </div>
26 </div>
27 <div class="modal-footer">
jquery是什么功能组件28 <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
29 <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
30 </div>
31 </div>
32 </div>
33 </div>
最外⾯的div定义了dialog的隐藏。我们重点来看看第⼆层的div
1 <div class="modal-dialog" role="document">
这个div定义了dialog，对应的class有三种尺⼨的弹出框，如下：
1 <div class="modal-dialog" role="document">
1 <div class="modal-dialog modal-lg" role="document">
1 <div class="modal-dialog modal-full" role="document">
第⼀种表⽰默认类型的弹出框；第⼆种表⽰增⼤的弹出框；第三种表⽰满屏的弹出框。role="document"表⽰弹出框的对象的当前的document。
2、js⾥⾯将dialog show出来。
默认情况下，我们的弹出框是隐藏的，只有在⽤户点击某个操作的时候才会show出来。来看看js⾥⾯是如何处理的吧：
1 //注册新增按钮的事件
2 $("#btn_add").click(function () {
3 $("#myModalLabel").text("新增");
4 $('#myModal').modal();
5 });
对，你没有看错，只需要这⼀句就能show出这个dialog。
1 $('#myModal').modal();
3、效果展⽰
新增效果
编辑效果
4、说明
弹出框显⽰后，点击界⾯上其他地⽅以及按Esc键都能隐藏弹出框，这样使得⽤户的操作更加友好。关于dialog⾥⾯关闭和保存按钮的事件的初始化在项⽬⾥⾯⼀般是封装过的，这个我们待会来看。
⼆、确认取消提⽰框
这种类型的提⽰框⼀般⽤于某些需要⽤户确定才能进⾏的操作，⽐较常见的如：删除操作、提交订单操作等。
1、使⽤bootstrap弹出框确认取消提⽰框
介绍这个组件之前，就得说说组件封装了，我们知道，像弹出框、确认取消提⽰框、信息提⽰框这些东西项⽬⾥⾯肯定是多处都要调⽤的，所以我们肯定是要封装组件的。下⾯就来看看我们封装的缺乏取消提⽰框。
1 (function ($) {
2
3 window.Ewin = function () {
4 var html = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
5 '<div class="modal-dialog modal-sm">' +
6 '<div class="modal-content">' +
7 '<div class="modal-header">' +
8 '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
9 '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
10 '</div>' +
11 '<div class="modal-body">' +
12 '<p>[Message]</p>' +
13 '</div>' +
14 '<div class="modal-footer">' +
15 '<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>' +
16 '<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>' +
17 '</div>' +
18 '</div>' +
19 '</div>' +
20 '</div>';
21
22
23 var dialogdHtml = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
24 '<div class="modal-dialog">' +
25 '<div class="modal-content">' +
26 '<div class="modal-header">' +
27 '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
28 '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
29 '</div>' +
30 '<div class="modal-body">' +
31 '</div>' +
32 '</div>' +
33 '</div>' +
34 '</div>';
35 var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
36 var generateId = function () {
37 var date = new Date();
38 return 'mdl' + date.valueOf();
39 }
40 var init = function (options) {
41 options = $.extend({}, {
42 title: "操作提⽰",
43 message: "提⽰内容",
44 btnok: "确定",
45 btncl: "取消",
46 width: 200,
47 auto: false
48 }, options || {});
49 var modalId = generateId();
50 var content = place(reg, function (node, key) {
51 return {
52 Id: modalId,
53 Title: options.title,
54 Message: ssage,
55 BtnOk: options.btnok,
56 BtnCancel: options.btncl
57 }[key];
58 });
59 $('body').append(content);
60 $('#' + modalId).modal({
61 width: options.width,
62 backdrop: 'static'
63 });
64 $('#' + modalId).on('dal', function (e) {
65 $('body').find('#' + modalId).remove();
66 });
67 return modalId;
68 }
69
70 return {
71 alert: function (options) {
72 if (typeof options == 'string') {
73 options = {
74 message: options
75 };
76 }
77 var id = init(options);
78 var modal = $('#' + id);
79 modal.find('.ok').removeClass('btn-success').addClass('btn-primary');
80 modal.find('.cancel').hide();
81
82 return {
83 id: id,
84 on: function (callback) {
85 if (callback && callback instanceof Function) {
86 modal.find('.ok').click(function () { callback(true); });
87 }
88 },
89 hide: function (callback) {
90 if (callback && callback instanceof Function) {
91 ('dal', function (e) {
92 callback(e);
93 });
94 }
95 }
96 };
97 },
98 confirm: function (options) {
99 var id = init(options);
100 var modal = $('#' + id);
101 modal.find('.ok').removeClass('btn-primary').addClass('btn-success'); 102 modal.find('.cancel').show();
103 return {
104 id: id,
105 on: function (callback) {
106 if (callback && callback instanceof Function) {
107 modal.find('.ok').click(function () { callback(true); });
108 modal.find('.cancel').click(function () { callback(false); }); 109 }
110 },
111 hide: function (callback) {
112 if (callback && callback instanceof Function) {
113 ('dal', function (e) {
114 callback(e);
115 });
116 }
117 }
118 };
119 },
120 dialog: function (options) {
121 options = $.extend({}, {
122 title: 'title',
123 url: '',
124 width: 800,
125 height: 550,
126 onReady: function () { },
127 onShown: function (e) { }
128 }, options || {});
129 var modalId = generateId();
130
131 var content = place(reg, function (node, key) {
132 return {
133 Id: modalId,
134 Title: options.title
135 }[key];
136 });
137 $('body').append(content);
138 var target = $('#' + modalId);
139 target.find('.modal-body').load(options.url);
140 if (Ready())
141 Ready.call(target);
142 dal();
143 ('dal', function (e) {
144 if (Ready(e))
145 Ready.call(target, e);
146 });
147 ('dal', function (e) {
148 $('body').find(target).remove();
149 });
150 }
151 }
152 }();
153 })(jQuery);
154
155 组件封装
不了解组件封装的朋友可以先看看相关⽂章。这⾥我们的确认取消提⽰框主要⽤到了confirm这个属性对应的⽅法。还是来看看如何调⽤吧：
1 //注册删除按钮的事件
2 $("#btn_delete").click(function () {
3 //取表格的选中⾏数据
4 var arrselections = $("#tb_departments").bootstrapTable('getSelections');
5 if (arrselections.length <= 0) {
6 toastr.warning('请选择有效数据');
7 return;
8 }
9
10 firm({ message: "确认要删除选择的数据吗？" }).on(function (e) {
11 if (!e) {
12 return;
13 }
14 $.ajax({
15 type: "post",
16 url: "/api/DepartmentApi/Delete",
17 data: { "": JSON.stringify(arrselections) },
18 success: function (data, status) {
19 if (status == "success") {
20 toastr.success('提交数据成功');
21 $("#tb_departments").bootstrapTable('refresh');
22 }
23 },
24 error: function () {
25 ('Error');
26 },
27 complete: function () {
28
29 }
30
31 });
32 });
33 });
message属性传⼊提⽰的信息，on⾥⾯注⼊点击按钮后的回调事件。
⽣成的效果：
2、bootbox组件的使⽤
在⽹上bootstrap的弹出组件时总是可以看到bootbox这么⼀个东西，确实是⼀个很简单的组件，还是来看看如何使⽤吧。
bootbox API：
当然要使⽤它必须要添加组件喽。⽆⾮也是两种⽅式：引⼊源码和Nuget。
接下来就是使⽤它了。⾸先当然是添加bootbox.js的引⽤了。然后就是在相应的地⽅调⽤了。
1 $("#btn_delete").click(function () {
2 var arrselections = $("#tb_departments").bootstrapTable('getSelections');
3 if (arrselections.length <= 0) {
4 toastr.warning('请选择有效数据');
5 return;
6 }
7
8 bootbox.alert("确认删除", function () {
9 var strResult = "";
10 })
11 bootbox.prompt("确认删除", function (result) {
12 var strResult = result;
13 })
14 firm("确认删除", function (result) {
15 var strResult = result;
16 })
17
18 });
效果展⽰：
更多⽤法可以参见api。使⽤起来基本很简单。这个组件最⼤的特点就是和bootstrap的风格能够很好的保持⼀致。
3、在⽹上还到⼀个效果⽐较炫⼀点的提⽰框：sweetalert
要使⽤它，还是⽼规矩：Nuget。
（1）⽂档
sweetalert Api：
开源项⽬源码：
（2）在cshtml页⾯引⼊js和css
1 <link href="~/Styles/sweetalert.css" rel="stylesheet" />
2 <script src="~/Scripts/sweetalert.min.js"></script>
（3）js使⽤
1 swal({
2 title: "操作提⽰", //弹出框的title
3 text: "确定删除吗？", //弹出框⾥⾯的提⽰⽂本
4 type: "warning", //弹出框类型
5 showCancelButton: true, //是否显⽰取消按钮
6 confirmButtonColor: "#DD6B55",//确定按钮颜⾊
7 cancelButtonText: "取消",//取消按钮⽂本
8 confirmButtonText: "是的，确定删除！",//确定按钮上⾯的⽂档
9 closeOnConfirm: true
10 }, function () {
11 $.ajax({
12 type: "post",
13 url: "/Home/Delete",
14 data: { "": JSON.stringify(arrselections) },
15 success: function (data, status) {
16 if (status == "success") {
17 toastr.success('提交数据成功');
18 $("#tb_departments").bootstrapTable('refresh');
19 }
20 },
21 error: function () {
22 ('Error');
23 },
24 complete: function () {
25
26 }
27
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论