Bootstrap实现弹出框和提示框效果代码

摘要:
123第一个弹出框表示默认类型;第二种类型表示放大的弹出框;第三种类型表示全屏弹出框。Role=“document”表示弹出对象的当前文档。

一、Bootstrap弹出框
使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富。与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件。打开bootstrap 文档可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面的,也就是说,只要我们引入了bootstrap的文件,就可以直接使用它的dialog组件,是不是很方便。本篇我们就结合新增编辑的功能来介绍下bootstrap dialog的使用。废话不多说,直接看来它如何使用吧。
1、cshtml界面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<divclass="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel">
  <divclass="modal-dialog"role="document">
   <divclass="modal-content">
    <divclass="modal-header">
     <buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button>
     <h4class="modal-title"id="myModalLabel">新增</h4>
    </div>
    <divclass="modal-body">
 
     <divclass="form-group">
      <labelfor="txt_departmentname">部门名称</label>
      <inputtype="text"name="txt_departmentname"class="form-control"id="txt_departmentname"placeholder="部门名称">
     </div>
     <divclass="form-group">
      <labelfor="txt_parentdepartment">上级部门</label>
      <inputtype="text"name="txt_parentdepartment"class="form-control"id="txt_parentdepartment"placeholder="上级部门">
     </div>
     <divclass="form-group">
      <labelfor="txt_departmentlevel">部门级别</label>
      <inputtype="text"name="txt_departmentlevel"class="form-control"id="txt_departmentlevel"placeholder="部门级别">
     </div>
     <divclass="form-group">
      <labelfor="txt_statu">描述</label>
      <inputtype="text"name="txt_statu"class="form-control"id="txt_statu"placeholder="状态">
     </div>
    </div>
    <divclass="modal-footer">
     <buttontype="button"class="btn btn-default"data-dismiss="modal"><spanclass="glyphicon glyphicon-remove"aria-hidden="true"></span>关闭</button>
     <buttontype="button"id="btn_submit"class="btn btn-primary"data-dismiss="modal"><spanclass="glyphicon glyphicon-floppy-disk"aria-hidden="true"></span>保存</button>
    </div>
   </div>
  </div>
 </div>

最外面的div定义了dialog的隐藏。我们重点来看看第二层的div

1
<divclass="modal-dialog"role="document">

这个div定义了dialog,对应的class有三种尺寸的弹出框,如下:

1
2
3
<divclass="modal-dialog"role="document">
<divclass="modal-dialog modal-lg"role="document">
<divclass="modal-dialog modal-full"role="document">

第一种表示默认类型的弹出框;第二种表示增大的弹出框;第三种表示满屏的弹出框。role="document"表示弹出框的对象的当前的document。

2、js里面将dialog show出来。
默认情况下,我们的弹出框是隐藏的,只有在用户点击某个操作的时候才会show出来。来看看js里面是如何处理的吧:

1
2
3
4
5
//注册新增按钮的事件
 $("#btn_add").click(function() {
  $("#myModalLabel").text("新增");
  $('#myModal').modal();
 });

对,你没有看错,只需要这一句就能show出这个dialog.

1
$('#myModal').modal();

3、效果展示
新增效果

Bootstrap实现弹出框和提示框效果代码第1张

编辑效果

Bootstrap实现弹出框和提示框效果代码第2张

4、说明
弹出框显示后,点击界面上其他地方以及按Esc键都能隐藏弹出框,这样使得用户的操作更加友好。关于dialog里面关闭和保存按钮的事件的初始化在项目里面一般是封装过的,这个我们待会来看。

二、确认取消提示框
这种类型的提示框一般用于某些需要用户确定才能进行的操作,比较常见的如:删除操作、提交订单操作等。

1、使用bootstrap弹出框确认取消提示框
介绍这个组件之前,就得说说组件封装了,我们知道,像弹出框、确认取消提示框、信息提示框这些东西项目里面肯定是多处都要调用的,所以我们肯定是要封装组件的。下面就来看看我们封装的缺乏取消提示框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
(function($) {
 
 window.Ewin = function() {
  varhtml = '<div role="dialog" aria-labelledby="modalLabel">'+
        '<div class="modal-dialog modal-sm">'+
         '<div class="modal-content">'+
          '<div class="modal-header">'+
           '<button type="button" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>'+
           '<h4 id="modalLabel">[Title]</h4>'+
          '</div>'+
          '<div class="modal-body">'+
          '<p>[Message]</p>'+
          '</div>'+
          '<div class="modal-footer">'+
  '<button type="button" data-dismiss="modal">[BtnCancel]</button>'+
  '<button type="button" data-dismiss="modal">[BtnOk]</button>'+
 '</div>'+
         '</div>'+
        '</div>'+
       '</div>';
 
 
  vardialogdHtml = '<div role="dialog" aria-labelledby="modalLabel">'+
        '<div class="modal-dialog">'+
         '<div class="modal-content">'+
          '<div class="modal-header">'+
           '<button type="button" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>'+
           '<h4 id="modalLabel">[Title]</h4>'+
          '</div>'+
          '<div class="modal-body">'+
          '</div>'+
         '</div>'+
        '</div>'+
       '</div>';
  varreg = newRegExp("\[([^\[\]]*?)\]", 'igm');
  vargenerateId = function() {
   vardate = newDate();
   return'mdl'+ date.valueOf();
  }
  varinit = function(options) {
   options = $.extend({}, {
    title: "操作提示",
    message: "提示内容",
    btnok: "确定",
    btncl: "取消",
     200,
    auto: false
   }, options || {});
   varmodalId = generateId();
   varcontent = html.replace(reg, function(node, key) {
    return{
     Id: modalId,
     Title: options.title,
     Message: options.message,
     BtnOk: options.btnok,
     BtnCancel: options.btncl
    }[key];
   });
   $('body').append(content);
   $('#'+ modalId).modal({
     options.width,
    backdrop: 'static'
   });
   $('#'+ modalId).on('hide.bs.modal', function(e) {
    $('body').find('#'+ modalId).remove();
   });
   returnmodalId;
  }
 
  return{
   alert: function(options) {
    if(typeofoptions == 'string') {
     options = {
      message: options
     };
    }
    varid = init(options);
    varmodal = $('#'+ id);
    modal.find('.ok').removeClass('btn-success').addClass('btn-primary');
    modal.find('.cancel').hide();
 
    return{
     id: id,
     on: function(callback) {
      if(callback && callback instanceofFunction) {
       modal.find('.ok').click(function() { callback(true); });
      }
     },
     hide: function(callback) {
      if(callback && callback instanceofFunction) {
       modal.on('hide.bs.modal', function(e) {
        callback(e);
       });
      }
     }
    };
   },
   confirm: function(options) {
    varid = init(options);
    varmodal = $('#'+ id);
    modal.find('.ok').removeClass('btn-primary').addClass('btn-success');
    modal.find('.cancel').show();
    return{
     id: id,
     on: function(callback) {
      if(callback && callback instanceofFunction) {
       modal.find('.ok').click(function() { callback(true); });
       modal.find('.cancel').click(function() { callback(false); });
      }
     },
     hide: function(callback) {
      if(callback && callback instanceofFunction) {
       modal.on('hide.bs.modal', function(e) {
        callback(e);
       });
      }
     }
    };
   },
   dialog: function(options) {
    options = $.extend({}, {
     title: 'title',
     url: '',
      800,
     height: 550,
     onReady: function() { },
     onShown: function(e) { }
    }, options || {});
    varmodalId = generateId();
 
    varcontent = dialogdHtml.replace(reg, function(node, key) {
     return{
      Id: modalId,
      Title: options.title
     }[key];
    });
    $('body').append(content);
    vartarget = $('#'+ modalId);
    target.find('.modal-body').load(options.url);
    if(options.onReady())
     options.onReady.call(target);
    target.modal();
    target.on('shown.bs.modal', function(e) {
     if(options.onReady(e))
      options.onReady.call(target, e);
    });
    target.on('hide.bs.modal', function(e) {
     $('body').find(target).remove();
    });
   }
  }
 }();
})(jQuery);

不了解组件封装的朋友可以先看看相关文章。这里我们的确认取消提示框主要用到了confirm这个属性对应的方法。还是来看看如何调用吧:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//注册删除按钮的事件
$("#btn_delete").click(function() {
  //取表格的选中行数据
  vararrselections = $("#tb_departments").bootstrapTable('getSelections');
  if(arrselections.length <= 0) {
   toastr.warning('请选择有效数据');
   return;
  }
 
  Ewin.confirm({ message: "确认要删除选择的数据吗?"}).on(function(e) {
   if(!e) {
    return;
   }
   $.ajax({
    type: "post",
    url: "/api/DepartmentApi/Delete",
    data: { "": JSON.stringify(arrselections) },
    success: function(data, status) {
     if(status == "success") {
      toastr.success('提交数据成功');
      $("#tb_departments").bootstrapTable('refresh');
     }
    },
    error: function() {
     toastr.error('Error');
    },
    complete: function() {
 
    }
 
   });
  });
 });

message属性传入提示的信息,on里面注入点击按钮后的回调事件。

生成的效果:

Bootstrap实现弹出框和提示框效果代码第3张

2、bootbox组件的使用
在网上找bootstrap的弹出组件时总是可以看到bootbox这么一个东西,确实是一个很简单的组件,还是来看看如何使用吧。

当然要使用它必须要添加组件喽。无非也是两种方式:引入源码和Nuget。

Bootstrap实现弹出框和提示框效果代码第4张

接下来就是使用它了。首先当然是添加bootbox.js的引用了。然后就是在相应的地方调用了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$("#btn_delete").click(function() {
   vararrselections = $("#tb_departments").bootstrapTable('getSelections');
   if(arrselections.length <= 0) {
    toastr.warning('请选择有效数据');
    return;
   }
 
   bootbox.alert("确认删除", function() {
    varstrResult = "";
   })
   bootbox.prompt("确认删除", function(result) {
    varstrResult = result;
   })
   bootbox.confirm("确认删除", function(result) {
    varstrResult = result;
   })
    
  });

效果展示:

Bootstrap实现弹出框和提示框效果代码第5张

Bootstrap实现弹出框和提示框效果代码第6张

Bootstrap实现弹出框和提示框效果代码第7张

更多用法可以参见api。使用起来基本很简单。这个组件最大的特点就是和bootstrap的风格能够很好的保持一致。

3、在网上还找到一个效果比较炫一点的提示框:sweetalert

Bootstrap实现弹出框和提示框效果代码第8张 

要使用它,还是老规矩:Nuget。

(1)文档

(2)在cshtml页面引入js和css

    <link href="http://t.zoukankan.com/~/Styles/sweetalert.css" rel="stylesheet" />
    <script src="http://t.zoukankan.com/~/Scripts/sweetalert.min.js"></script>
(3)js使用
     

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
swal({
   title: "操作提示"//弹出框的title
   text: "确定删除吗?", //弹出框里面的提示文本
   type: "warning"//弹出框类型
   showCancelButton: true, //是否显示取消按钮
   confirmButtonColor: "#DD6B55",//确定按钮颜色
   cancelButtonText: "取消",//取消按钮文本
   confirmButtonText: "是的,确定删除!",//确定按钮上面的文档
   closeOnConfirm: true
  }, function() {
    $.ajax({
     type: "post",
     url: "/Home/Delete",
     data: { "": JSON.stringify(arrselections) },
     success: function(data, status) {
      if(status == "success") {
       toastr.success('提交数据成功');
       $("#tb_departments").bootstrapTable('refresh');
      }
     },
     error: function() {
      toastr.error('Error');
     },
     complete: function() {
 
     }
 
    });
  });

(4)效果展示:

Bootstrap实现弹出框和提示框效果代码第9张

点击确定后进入回调函数:

Bootstrap实现弹出框和提示框效果代码第10张

组件很多,用哪种园友没可以自行决定,不过博主觉得像一些互联网、电子商务类型的网站用sweetalert效果比较合适,一般的内部系统可能也用不上。

三、操作完成提示框
1、toastr.js组件
关于信息提示框,博主项目中使用的是toastr.js这么一个组件,这个组件最大的好处就是异步、无阻塞,提示后可设置消失时间,并且可以将消息提示放到界面的各个地方。先来看看效果。

Bootstrap实现弹出框和提示框效果代码第11张

显示在不同位置:

top-center位置

Bootstrap实现弹出框和提示框效果代码第12张

bottom-left位置

Bootstrap实现弹出框和提示框效果代码第13张

关于它的使用。

(1)、引入js和css 

1
2
<link href="~/Content/toastr/toastr.css"rel="stylesheet"/>
<script src="~/Content/toastr/toastr.min.js"></script>

(2)、js初始化

1
2
3
<script type="text/javascript">
  toastr.options.positionClass = 'toast-bottom-right';
 </script>

将这个属性值设置为不同的值就能让提示信息显示在不同的位置,如toast-bottom-right表示下右、toast-bottom-center表示下中、toast-top-center表示上中等,更过位置信息请查看文档。

(3)、使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//初始化编辑按钮
$("#btn_edit").click(function() {
   vararrselections = $("#tb_departments").bootstrapTable('getSelections');
   if(arrselections.length > 1) {
    toastr.warning('只能选择一行进行编辑');
 
    return;
   }
   if(arrselections.length <= 0) {
    toastr.warning('请选择有效数据');
 
    return;
   }
    
   $('#myModal').modal();
  });

使用起来就如下一句:

toastr.warning('只能选择一行进行编辑');
是不是很简单~~这里的有四种方法分别对应四种不同颜色的提示框。

toastr.success('提交数据成功');
toastr.error('Error');
toastr.warning('只能选择一行进行编辑');
toastr.info('info');

分别对应上图中的四种颜色的提示框。

2、Messenger组件
在Bootstrap中文网里面提到了一个alert组件:Messenger。

Bootstrap实现弹出框和提示框效果代码第14张

它的使用和toastr.js这个组件基本相似,只不过效果有点不太一样。我们还是来看看它是如何使用的。

(1)效果展示

可以定位到网页的不同位置,例如下图中给出的下中位置、上中位置。

Bootstrap实现弹出框和提示框效果代码第15张

Bootstrap实现弹出框和提示框效果代码第16张

提示框的样式有三种状态:Success、Error、Info

Bootstrap实现弹出框和提示框效果代码第17张

并且支持四种不同样式的提示框:Future、Block、Air、Ice

Bootstrap实现弹出框和提示框效果代码第18张

(2)组件使用以及代码示例

关于它的使用和toastr大同小异,首先引入组件:

1
2
3
<script src="~/Content/HubSpot-messenger-a3df9a6/build/js/messenger.js"></script>
 <link href="~/Content/HubSpot-messenger-a3df9a6/build/css/messenger.css"rel="stylesheet"/>
 <link href="~/Content/HubSpot-messenger-a3df9a6/build/css/messenger-theme-future.css"rel="stylesheet"/>

初始化它的位置

1
2
3
4
5
<script type="text/javascript">
 $._messengerDefaults = {
  extraClasses: 'messenger-fixed messenger-theme-future messenger-on-bottom messenger-on-right'
 }
</script>

然后js里面使用如下:

1
2
3
4
5
6
7
8
9
$("#btn_delete").click(function() {
  $.globalMessenger().post({
   message: "操作成功",//提示信息
   type: 'info',//消息类型。error、info、success
   hideAfter: 2,//多长时间消失
   showCloseButton:true,//是否显示关闭按钮
   hideOnNavigate: true//是否隐藏导航
 });
});

如果提示框使用默认样式,也只有一句就能解决 

1
2
3
4
$.globalMessenger().post({
   message: "操作成功",//提示信息
   type: 'info',//消息类型。error、info、success
 });

很简单很强大有木有~~

免责声明:文章转载自《Bootstrap实现弹出框和提示框效果代码》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇【CUDA并行编程之八】Cuda实现Kmeans算法React 还是 Vue: 你应该选择哪一个Web前端框架?下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

HTML编码规范

HTML编码规范 1 前言 HTML作为描述网页结构的超文本标记语言,在百度一直有着广泛的应用。本文档的目标是使HTML代码风格保持一致,容易被理解和被维护。 2 代码风格 2.1 缩进与换行 [强制] 使用 4个空格做为一个缩进层级,不允许使用 2个空格 或 tab字符。 示例: <ul> <li>first</li>...

WPF 制作圆角按钮

在程序对应坐置插入以下代码,或是先拖一个按钮控件到窗体中,再替换对应的代码。 修改CornerRadius="18,3,18,3" 就可以改变圆角大小 按钮效果: <Button Content="Button" HorizontalAlignment="Left" Margin="19,10,0,0" VerticalAlignment="Top...

跨域(三)——JSONP

一、什么是JSONP? 百度百科:JSONP(JSON with Padding)是JSON的 一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利...

ElementUI el-dialog中打开一个新的el-dialog(Vue子组件定义变量的一个坑)

先上效果图: 用户点击到文本框内即可查看Guss的详情 这是el-dialog里面套着一个el-dialog,我去年写过一篇博客是使用ifame标签来实现el-dialog里面嵌套一个div的,随着开发经验增加。。。发现用组件化即可很完美的解决dialog里面嵌套dialog的问题。 请务必注意!dialog的放置位置! 在这个Guss的父组件就是图中...

如何给flash里面添加链接

解决思路:因为网页中的 Flash 是以控件形式出现的,优先级别较高,所以直接对它加链接是无效的,不过可以用按钮控件 BUTTON 来实现。 方案一: 直接在按钮上加上onClick事件打开指定页面,运行后单击按钮时,按钮中的Flash有个下沉的动作,如果要取消这个动作,可以禁止按钮的交互性,然后用标准的A标签做链接,代码如下: <a class="...

手机QQ后台清理不掉的秘密——anddroid悬浮窗

问题来自于一篇文章:手机QQ后台为何清不掉?MIUIproject师:全靠1像素的页面保命 出于好奇,想知道这一像素究竟是啥东西,用手机安全管家控制QQ的悬浮窗权限: 关闭QQ的悬浮窗权限,通过后台一键清理,又一次打开QQ,发现是从splash開始的; 打开QQ的悬浮窗权限,一键清理后,打开QQ。发现是直接进入主界面的。说明一键清理未清理QQ,或者清理之...