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

一、Bootstrap弹出框
运用过JQuery
UI应该精通,它里面有3个dialog的弹出框组件,功效也很丰盛。与jQuery
UI的dialog类似,Bootstrap里面也置于了弹出框组件。打开bootstrap
文书档案能够观望它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面包车型地铁,也便是说,只要大家引进了bootstrap的文书,就能够直接使用它的dialog组件,是否很有益。本篇我们就构成新增加编写制定制的职能来介绍下bootstrap
dialog的施用。废话不多说,直接看来它怎么行使啊。
1、cshtml界面代码

云集品TPS:201八社交电商能擦出怎么着火花

?

在过去20壹七年“双十壹”时期,Ali京东双双都宣传自个儿平台的销售额达到1200多亿,刷新了新的笔录,同时广大的标准专家觉得,电子商务的市镇份额已经趋于饱和,线上的流量红利时期已经终止,必须寻求新的增进点。

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
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
     <h4 class="modal-title" id="myModalLabel">新增</h4>
    </div>
    <div class="modal-body">
 
     <div class="form-group">
      <label for="txt_departmentname">部门名称</label>
      <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" placeholder="部门名称">
     </div>
     <div class="form-group">
      <label for="txt_parentdepartment">上级部门</label>
      <input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment" placeholder="上级部门">
     </div>
     <div class="form-group">
      <label for="txt_departmentlevel">部门级别</label>
      <input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel" placeholder="部门级别">
     </div>
     <div class="form-group">
      <label for="txt_statu">描述</label>
      <input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="状态">
     </div>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
     <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
    </div>
   </div>
  </div>
 </div>

而相较于货架式商品显示,以云集品TPS为代表的争辨电商平台越多以体验、测验评定类优质内容开始展览传播,能可信赖激活用户社会群众工作行为。从上游的货物购买销售,到下游的顶点用户交付,供应链全链条的维持力量带来的购物心得差别成为了前途竞争中形成壁垒的宗旨因素。

最外侧的div定义了dialog的隐身。我们最首要来探望第二层的div

云集品TPS通过分享者在张罗平台上拓展商品传播,当商品成交后,不仅分享者能够从阳台获得分享奖励,而且买家也能以更优惠的价钱取得商品。值得1提的是,分享者能够在云集品TPS塑造和谐的天性集团,从而分享者可一键分享店铺给密友,轻松到手奖励。那壹方式不但为公司销售提供了新渠道与新玩法,更是为社交电商品展览示了一种崭新化解方案。

?

在价值观商业情势中,Taobao、京东是“中央化”的摸索电商格局的表示,随着人口红利消失,搜索电商的加快在缓慢,而“去宗旨化”的云集品TPS社交电商正在急迅崛起,成为电商新情势。

1
<div class="modal-dialog" role="document">

不可不可以认,云集品TPS火速崛起的私行,商业情势是中间二个驱引力,云集品TPS在叁个适度的时光做了1个相对科学的事。在运动互连网时期,社交网络已经不行蓬勃,人们平时生活已经离不开各样社交平台,用屡见不鲜的交际方式。社交媒体在方方面面运动网络选取时间长度中早已占到4/10上述,但社交媒体的商业化是很差的,40—二分之一人的眼珠子转向出来的交易量大概只占到整个社会零售总额的8%,跟目标性购物的缩小式电商相比较,那是高大的不包容。在那样市集容积巨大且运动支付产生的时候,云集品TPS社交电商方式足够把移动用户的消费潜力激发出来。

以此div定义了dialog,对应的class有二种尺寸的弹出框,如下:

?

1
2
3
<div class="modal-dialog" role="document">
<div class="modal-dialog modal-lg" role="document">
<div class="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();

叁、效果突显 新增功用

图片 1

编纂效果

图片 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 () {
  var html = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
        '<div class="modal-dialog modal-sm">' +
         '<div class="modal-content">' +
          '<div class="modal-header">' +
           '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
           '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
          '</div>' +
          '<div class="modal-body">' +
          '<p>[Message]</p>' +
          '</div>' +
          '<div class="modal-footer">' +
  '<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>' +
  '<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>' +
 '</div>' +
         '</div>' +
        '</div>' +
       '</div>';
 
 
  var dialogdHtml = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
        '<div class="modal-dialog">' +
         '<div class="modal-content">' +
          '<div class="modal-header">' +
           '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
           '<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
          '</div>' +
          '<div class="modal-body">' +
          '</div>' +
         '</div>' +
        '</div>' +
       '</div>';
  var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
  var generateId = function () {
   var date = new Date();
   return 'mdl' + date.valueOf();
  }
  var init = function (options) {
   options = $.extend({}, {
    title: "操作提示",
    message: "提示内容",
    btnok: "确定",
    btncl: "取消",
    width: 200,
    auto: false
   }, options || {});
   var modalId = generateId();
   var content = 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({
    width: options.width,
    backdrop: 'static'
   });
   $('#' + modalId).on('hide.bs.modal', function (e) {
    $('body').find('#' + modalId).remove();
   });
   return modalId;
  }
 
  return {
   alert: function (options) {
    if (typeof options == 'string') {
     options = {
      message: options
     };
    }
    var id = init(options);
    var modal = $('#' + id);
    modal.find('.ok').removeClass('btn-success').addClass('btn-primary');
    modal.find('.cancel').hide();
 
    return {
     id: id,
     on: function (callback) {
      if (callback && callback instanceof Function) {
       modal.find('.ok').click(function () { callback(true); });
      }
     },
     hide: function (callback) {
      if (callback && callback instanceof Function) {
       modal.on('hide.bs.modal', function (e) {
        callback(e);
       });
      }
     }
    };
   },
   confirm: function (options) {
    var id = init(options);
    var modal = $('#' + id);
    modal.find('.ok').removeClass('btn-primary').addClass('btn-success');
    modal.find('.cancel').show();
    return {
     id: id,
     on: function (callback) {
      if (callback && callback instanceof Function) {
       modal.find('.ok').click(function () { callback(true); });
       modal.find('.cancel').click(function () { callback(false); });
      }
     },
     hide: function (callback) {
      if (callback && callback instanceof Function) {
       modal.on('hide.bs.modal', function (e) {
        callback(e);
       });
      }
     }
    };
   },
   dialog: function (options) {
    options = $.extend({}, {
     title: 'title',
     url: '',
     width: 800,
     height: 550,
     onReady: function () { },
     onShown: function (e) { }
    }, options || {});
    var modalId = generateId();
 
    var content = dialogdHtml.replace(reg, function (node, key) {
     return {
      Id: modalId,
      Title: options.title
     }[key];
    });
    $('body').append(content);
    var target = $('#' + 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 () {
  //取表格的选中行数据
  var arrselections = $("#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里面注入点击按钮后的回调事件。

浮动的效应:

图片 3

贰、bootbox组件的运用 在网上找bootstrap的弹出组件时老是能够观望bootbox这么贰个东西,确实是三个很简单的组件,依然来探视如何使用啊。

自然要采纳它必供给添加组件喽。无非也是三种格局:引进源码和Nuget。

图片 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 () {
   var arrselections = $("#tb_departments").bootstrapTable('getSelections');
   if (arrselections.length <= 0) {
    toastr.warning('请选择有效数据');
    return;
   }
 
   bootbox.alert("确认删除", function () {
    var strResult = "";
   })
   bootbox.prompt("确认删除", function (result) {
    var strResult = result;
   })
   bootbox.confirm("确认删除", function (result) {
    var strResult = result;
   })
    
  });

效用显示:

图片 5

图片 6

图片 7

更加多用法能够参见api。使用起来基本相当粗略。那些组件最大的风味正是和bootstrap的作风能够很好的保持壹致。

三、在网上还找到多少个成效比较炫一点的提醒框:sweetalert

图片 8 

要运用它,依然老办法:Nuget。

(1)文档

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

    <link href=”~/Styles/sweetalert.css” rel=”stylesheet” />
    <script src=”~/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)效果体现:

图片 9

点击确定后跻身回调函数:

图片 10

零件很多,用哪一类园友没能够自行决定,不过博主觉得像1些互连网、电子商务类型的网址用sweetalert效果相比较适合,壹般的中间系统或许也用不上。

三、操作实现提醒框
1、toastr.js组件
有关新闻提醒框,博主项目中央银行使的是toastr.js这么四个零部件,那么些组件最大的补益正是异步、无阻塞,提醒后可设置未有时间,并且能够将消息提醒放到界面包车型地铁依次地方。先来探望效果。

图片 11

体今后分化职责:

top-center位置

图片 12

bottom-left位置

图片 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 () {
   var arrselections = $("#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汉语网里面涉及了3个alert组件:Messenger。

图片 14

它的施用和toastr.js这么些组件基本相似,只可是效果有点不太雷同。大家照旧来探视它是哪些选择的。

(①)效果呈现

能够固定到网页的例外职分,例如下图中提交的下中地方、上中地方。

图片 15

图片 16

提醒框的样式有两种状态:Success、Error、Info

图片 17

同时协助三种差异样式的提示框:Future、Block、Air、Ice

图片 18

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

关于它的采用和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
 });

很不难很强大有木有~~

Leave a Comment.