何以利用Bootstrap的modal组件自定义alert韦德娱乐

2019-06-08 12:42 来源:未知

bootstrap-confirmation按键提醒组件,它相仿于js里面confirm的功能,分界面越来越雅观。

何以采纳Bootstrap的modal组件自定义alert,confirm和modal对话框,bootstrapmodal

本文小编将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件轻巧易用,效果大气精美且很实用!

是因为浏览器提供的alert和confirm框体验不佳,而且浏览器未有提供一个正经的以对话框的形式显得自定义HTML的弹框函数,所以广大品类都会自定义对话框组件。本篇小说介绍自身在类型中基于bootstrap的modal组件,自定义alert,confirm和modal对话框的经历,相对相比轻便实用,希望能对您有着参照他事他说加以考查价值。

壹. 实例呈现

详细的代码可通过后边给出的下载链接下载源码去探听,代码量十分的小,那多少个零部件加起来唯有200多行

韦德娱乐1946网页版 1

假定你有javascript的组件开拓经历,小编那几个层级的代码相信您瞬间就会看精通。源码中自个儿还提交了3个demo,那个demo模拟了一个相比较附近现实须求的三个光景:

壹)用户点击界面上的某部开关,张开事先定义的多少个modal框:

韦德娱乐1946网页版 2

2)用户在开发的modal框内填写部分表单,点击鲜明的时候,会接触一些校验:

没填email时:

韦德娱乐1946网页版 3

填写了email之后:

韦德娱乐1946网页版 4

这多少个提醒其实是为了演示Alert和Confirm的功能硬塞进去的,实际上也许未有那样别扭的效应。

叁)在提醒Password为空的时候,细心的人会发觉十分鲜明开关处于二个剥夺的情景,那么些思量是因为鲜明按键最后要做到的是一些异步任务,在异步职务成功完结从前,小编希望modal组件都毫无关闭,并且能够决定已点击的按键不能够重复点击;

4)我用setTimeout模拟了3个异步义务,这些异步任务在点击分明按键之后,三s才会回调,并且:

当email输入[email protected] 的时候,会交到提交成功的唤醒,鲜明以后就能停业全体的弹框:

韦德娱乐1946网页版 5

当email输入任何值得时候,会付给提交退步的提示,并且modal框会照旧展现在这里:

韦德娱乐1946网页版 6

韦德娱乐1946网页版 7

在组件定义里面,尤其是登记按键那1块,小编加了部分AOP编制程序的拍卖,同时采取了jquery的延期对象,来贯彻笔者急需的异步编制程序,实际情况请阅读源码,有标题能够在商量区沟通赐教。

2. 零件须要

临时为了写三个好用的机件,只需求把它的大概原型和要对外表提供的接口显著下来,就曾经变成那么些组件编写最关键的干活了,固然还一贯不从头编码。以本文要编写的那多少个零件来讲,作者想要的那多少个零部件的原型和调用方式分别是如此的:

1)自定义alert框

原型是:

韦德娱乐1946网页版 8

调用时最多需求多少个参数,一个msg用来传递要来得的提示内容,1个onOk用来拍卖规定按键点击时候的回调,调用格局有以下二种:

//1
Alert('您选择的订单状态不符合当前操作的条件,请刷新列表显示最新数据后再继续操作!');
//2
Alert({
msg: '您选择的订单状态不符合当前操作的条件,请刷新列表显示最新数据后再继续操作!',
onOk: function(){
}
}); 

率先种是尚未回调的事态,那么直接传送msg就可以,第2种是有回调的情状,用options对象的措施来传递msg和onOks回调那三个参数。不管onOk回调有未有,点击按键的时候都要关张弹框。

2)自定义confirm框

这些框的原型跟alert框只差3个开关:

调用格局唯有1种:

韦德娱乐1946网页版 9

Confirm({
msg: '您选择的订单状态不符合当前操作的条件,请确认是否要继续操作!',
onOk: function(){
},
onCancel: function(){
}
}); 

onCancel是在点击打消按键时候的回调。不管onOk和onCancel回调有未有,点击开关的时候都要关闭弹框。onCancel回调能够未有。

3)自定义modal框

原型:

韦德娱乐1946网页版 10

调用格局:

var modal = new Modal({
title: '',
content: '',
width: 600,
buttons: [
{
html: '<button type="button" class="btn btn-sm btn-primary btn-ok">确定</button>',
selector: '.btn-ok',
callback: function(){
//点击确定按钮的回调
}
},
{
html: '<button type="button" class="btn btn-sm btn-default btn-cancel">取消</button>',
selector: '.btn-cancel',
callback: function(){
//点击取消按钮的回调
}
}
],
onContentReady: function(){
//当modal添加到DOM并且初始化完毕时的事件回调,每个modal实例这个回调只会被触发一次
},
onContentChange: function(){
//当调用modal.setContent类似的方法改变了modal内容时的事件回调
},
onModalShow: function(){
//当调用modal.open类似方法显示modal时都会触发的事件回调
},
onModalHide: function(){
//当调用modal.hide类似方法隐藏modal时都会触发的事件回调
}
});
$('#btn-audit').click(function(){
modal.open();
}); 

跟Alert和Confirm差别的是,3个页面里面只必要3个Alert和Confirm的实例,但是大概须求多少个Modal的实例,所以每一种Modal对象都要求独自new一下。由于种种Modal要成功的政工都分裂等,所以:

亟需八个title参数来设置名称,表明那个Modal正在处理的事情;

content参数表示Modal的html内容;

width参数设置Modal的上涨的幅度,Modal的万丈保持auto;

buttons参数用来布局那个Modal下边包车型大巴开关,一般景观下Modal组件只供给七个开关(明确和收回)就够了,但也有些情况要求五个开关,所以把按键做成配置的主意相对灵活一点,每一个按键用多少个参数来配置,html表示按键的html结构,selector方便注册回调的时候经过事件委托的措施来管理,callback配置开关点击时的回调;

onContentReady那么些事件回调,能够在Modal初叶化完结的时候,主动去开首化Modal内部html的有的零件;由于组件初阶化一般只进行二回,所以放在那些回调里面最合适;

onContentChange回调,在3个Modal要求被当作分化的现象,展现差别的HTML的源委时会派上用场,可是不是11分的好用,管理起来逻辑会稍微偏复杂,若是一个Modal实例只做1件业务的时候,onContentChange那个回调就用不到了;

onModalShow那么些回调在每一回显示Modal的时候都会议及展览示,使用的气象有广大,比如有个别Modal用来填写部分表单内容,后一次填写的时候需求reset一下表单本领给用户使用,这种拍卖在这一个回调里面管理就比较方便;

onModalHide那个回调有用,但是能够采用的气象相当的少,算是预留的3个接口。

四)别的须要

享有类型的弹框都做成虚拟模态的花样,突显框的同期加八个遮罩;

具有框都没有供给扶助拖动和大小调度;

alert和dialog框的标题,开关数量、开关地方、开关文字都一定。

实际上:

遮罩这么些意义,bootstrap的modal组件本人就已经帮助了;

拖动和分寸调度,这些效果属于如鱼得水,不过对软件本身来讲,并一定有微微额外的便宜,所以自身选用不做这种多余的拍卖;

alert和dialog无需做太过个性化,能够合并风格,退换浏览器原生的弹框体验就可以。

五)DEMO中调用实例

接下去演示下自家在达成那八个零部件开辟从此,实际使用过程中调用这么些零件的艺术:

var modal = new Modal({
title: '测试modal',
content: $('#modal-tpl').html(),
width: 500,
onOk: function(){
var $form = this.$modal.find('form');
var data = $form.serializeArray();
var postData = {};
data.forEach(function(obj){
postData[obj.name] = obj.value;
});
if(!postData.email) {
Alert('请输入EMAIL!');
return false;
}
var deferred = $.Deferred();
if(!postData.password) {
Confirm({
msg: 'Password为空,是否要继续?',
onOk: function(){
_post();
},
onCancel: function(){
deferred.reject();
}
})
} else {
_post();
}
return $.when(deferred);
function _post(){
//模拟异步任务
setTimeout(function(){
if(postData.email === '[email protected]') {
Alert({
msg: '提交成功!',
onOk: function(){
deferred.resolve();
}
});
} else {
Alert({
msg: '提交失败!',
onOk: function(){
deferred.reject();
}
});
}
},3000);
}
},
onModalShow: function () {
var $form = this.$modal.find('form');
$form[0].reset();
}
});
$('#btn-modal').click(function () {
modal.open();
}); 

三. 实现中央

一)最基础的有些,要对bootstrap的modal组件源码有所领悟:

开头化格局:$modal.modal()

打开:$modal.modal('show')

关闭:$modal.modal(hide)

事件:bootstrap超过一半带过渡效果的零件的事件都是成对的,并且一个是今天时,一个是瓜熟蒂落时,modal组件定义了2对:

show.bs.modal和shown.bs.modal,hide.bs.modal和hidden.bs.modal。

这两对事件分别在开拓和关闭的过渡效果推行前后触发。从自己要定义的组件要求来讲,定义组件的时候需求show.bs.modal和hidden.bs.modal那多个事件,在侦听到bootstrap的modal组件派发那三个事件的时候,派发本人定义的零件的轩然大波:

modalShow和modalHide。

选项:

backdrop: 是不是出示遮罩;
keyboard: 是或不是匡助键盘回调;
show:是或不是在初步化实现就及时展现。

那多少个选项暗中认可都以true,不过在作者定义组件的时候,作者都配备成了false,键盘回调这种特点一时半刻不思量,所以安顿为true;当

调用bootstrap的modal伊始化的时候自然不能够即时展现弹框,所以也无法布署为true;backdrop配置为false的来由在下一些介绍。

2)遮罩管理

韦德娱乐1946网页版,假定启用bootstrap的遮罩,会发觉在点击遮罩部分的时候,弹框就能自动关闭了,那不是本人梦想的虚拟模态效果,所以必须把backdrop配置为false。可是把这一个选项配置为false之后,又会迷惑三个新主题素材,就是组件未有了遮罩效果,所以为了兼顾那七个难题,只可以本身写三个简易的遮罩管理:

var $body = $(document.body),
BackDrop = (function () {
var $backDrop,
count = 0,
create = function () {
$backDrop = $('<div class="modal-backdrop fade in"></div>').appendTo($body);
};
return {
show: function () {
!$backDrop && create();
$backDrop[0].style.display = 'block';
count  ;
},
hide: function () {
count--;
if (!count) {
$backDrop.remove();
$backDrop = undefined;
}
}
}
})(); 

这段代码中引进count变量的因由是因为BackDrop是1个大局的单例对象,当调用三个modal实例的open方法的时候,都会调用BackDrop的show方法,为了保证在调用BackDrop的hide方法时,能够确认保障在具有的modal实例都关闭之后再隐藏Backdrop,所以就加了一个count变量来记录BackDrop的show方法被调用了多少次,唯有当count为0的时候,调用BackDrop的hide方法才会真的隐藏BackDrop。

三)组件的抉择的暗中认可值定义

ModalDialog.defaults = {
title: '',
content: '',
width: 600,
buttons: [
{
html: '<button type="button" class="btn btn-sm btn-primary btn-ok">确定</button>',
selector: '.btn-ok',
callback: getDefaultBtnCallbackProxy('onOk')
},
{
html: '<button type="button" class="btn btn-sm btn-default btn-cancel">取消</button>',
selector: '.btn-cancel',
callback: getDefaultBtnCallbackProxy('onCancel')
}
],
onOk: $.noop,
onCancel: $.noop,
onContentReady: $.noop,
onContentChange: $.noop,//content替换之后的回调
onModalShow: $.noop,
onModalHide: $.noop//modal关闭之后的回调
}; 

经过buttons配置多个默许的按键,鲜明和取消,然后为了简化那四个默许按键的回调配置,把那八个开关的接口进一步扩展到了上一流别,onOk和onCancel分别会在点击鲜明和打消的时候被调用,那多少个挑选完全部是函数回调,不像onContentReady这种属于事件回调。getDefaultBtnCallbackProxy用来支援注册onOk和onCancel:

var getDefaultBtnCallbackProxy = function (callbackName) {
return function () {
var opts = this.options,
callback = opts[callbackName] && typeof opts[callbackName] === 'function' ? opts[callbackName] : '';
return callback && callback.apply(this, arguments);
}
}

其间的this会被绑定到modal实例上。

四)构造函数:

function ModalDialog(options) {
this.options = this.getOptions(options);
this.$modal = undefined;
this.$modalTitle = undefined;
this.$modalBody = undefined;
this.$modalFooter = undefined;
this.state = undefined;
}

本条重中之重是宣称了用到的片段实例变量。

伍)关键的原型方法和函数

open: function (state) {
this.state = state;
!this.$modal && initModal(this, this.options);
BackDrop.show();
this.$modal.modal('show');
}

那是个原型方法,组件的开端化也是在这么些办法调用的时候实践的(延迟起首化)。

initModal = function (that, opts) {
var $modal = createModal(that);
that.setTitle(opts.title);
that.setContent(opts.content);
that.addButtons(opts.buttons);
that.setWidth(opts.width);
bindHandler(that, opts);
$modal.modal();//调用bootstrap的Modal组件
$modal.trigger('contentReady');
}

那是个函数,用来早先化组件。在那之中:

setTitle是个原型方法,用来安装modal的标题;

setContent是个原型方法,用来设置modal的html内容;

addButtons是个原型方法,用来注册开关;

setWidth是个原型方法,用来设置modal的宽窄;

bindHandler是个函数,用来注册modal的这个事件;

尾数第三步调用$modal.modal()初始化bootstrap的modal组件;

最后一步触发contentReady事件。

bindHandler源码:

bindHandler = function (that, opts) {
var $modal = that.$modal;
typeof opts.onContentChange === 'function' && $modal.on('contentChange', $.proxy(opts.onContentChange, that));
typeof opts.onContentReady === 'function' && $modal.on('contentReady', $.proxy(opts.onContentReady, that));
typeof opts.onModalShow === 'function' && $modal.on('modalShow', $.proxy(opts.onModalShow, that));
typeof opts.onModalHide === 'function' && $modal.on('modalHide', $.proxy(opts.onModalHide, that));
$modal.on('show.bs.modal', function () {
$modal.trigger('modalShow');
});
$modal.on('hidden.bs.modal', function () {
$modal.trigger('modalHide');
});
}

为了方便使用,小编把onContentChange那多少个回调的上下文绑定到了眼下的modal实例。最后七个事件侦听正是把bootstrap的事件封装成了自己定义的modal事件。

addButtons源码:

addButtons: function (buttons) {
var buttons = !$.isArray(buttons) ? [] : buttons,
that = this,
htmlS = [];
buttons.forEach(function (btn) {
htmlS.push(btn.html);
btn.selector && that.$modal.on('click', btn.selector, $.proxy(function (e) {
var self = this,
$btn = $(e.currentTarget);
//先禁用按钮
$btn[0].disabled = true;
var callback = typeof btn.callback === 'function' ? btn.callback : '',
ret = callback && callback.apply(self, arguments);
if (ret === false) {
$btn[0].disabled = false;
return;
}
if (typeof(ret) === 'object' && 'done' in ret && typeof ret['done'] === 'function') {
//异步任务只有在成功回调的时候关闭Modal
ret.done(function () {
that.hide();
}).always(function () {
$btn[0].disabled = false;
});
} else {
$btn[0].disabled = false;
that.hide();
}
}, that));
});
this.$modalFooter.prepend($(htmlS.join('')));
}

从那一个代码能够看到:

当开关点击之后,按键就能够被剥夺;

当开关重回false的时候,按键苏醒,不过modal不会被关门,表明当前的有个别操作被代码给拦下来了;

当按键再次来到的是一个推迟对象的时候,会等到延迟对象完毕的时候才会大张旗鼓开关,并且唯有在延迟对象resolve的时候才会倒闭modal;

不然就过来开关,并主动关闭modal。

在这段代码里面怀恋了:

开关的防重复点击,modal的自动关闭以及异步任务的管理。

6)封装Alert和Confirm

Alert和Confirm其实正是贰个非同小可的modal,其它这多个零部件还足以共用三个modal,掌握到那一个基础之后,组件就能够如此定义:

var Alert, Confirm;
(function () {
var modal,
Proxy = function (isAlert) {
return function () {
if (arguments.length != 1) return;
var msg = typeof arguments[0] === 'string' && arguments[0] || arguments[0].msg || '',
onOk = typeof arguments[0] === 'object' && typeof arguments[0].onOk === 'function' && arguments[0].onOk,
onCancel = typeof arguments[0] === 'object' && typeof arguments[0].onCancel === 'function' && arguments[0].onCancel,
width = typeof arguments[0] === 'object' && arguments[0].width || 400,
_onModalShow = function () {
this.setWidth(width);
this.setContent(msg);
this[(isAlert ? 'hide' : 'show')   'Button']('.btn-cancel');
},
_onModalHide = function () {
this.setContent('');
};
//延迟初始化modal
if(!modal) {
modal = new Modal({
'title': '操作提示',
onModalShow: _onModalShow,
onModalHide: _onModalHide,
onContentReady: function(){
this.$modalBody.css({
'padding-top': '30px',
'padding-bottom': '30px'
})
}
});
} else {
//如果modal已经初始化则需要重新监听事件
var $modal = modal.$modal;
$modal.off('modalShow modalHide');
$modal.off('modalShow modalHide');
$modal.on('modalShow', $.proxy(_onModalShow, modal));
$modal.on('modalHide', $.proxy(_onModalHide, modal));
}
modal.setOptions({
onOk: onOk || $.noop,
onCancel: onCancel || $.noop
});
modal.open();
}
};
Alert = Proxy(true);
Confirm = Proxy();
})(); 

这段代码里:

先是考虑到了延期初阶化这几个全局的modal组件;

由于onModalHide和onModalShow那多个回调属于事件回调,在开端化组件的时候经过options传进去的参数,不能够透过修改options的主意来改换回调,只可以通过重复挂号的秘籍来拍卖;而onOk和onCancel属于函数回调,只要更换了options里面包车型大巴引用,回调就可以改动;

怀念到Alert和Confirm内容的长短,新加了五个参数width,以便调度框的上升的幅度。

4. 小结

正文介绍的是友善在定义js组件进程中的一些方法和实施,代码偏多,不轻巧招令人的读书兴趣,不过文中介绍的不二诀窍对比简单,而且这多个零部件我已经使用好几个类型里面,从脚下来看,能够解决本人具备需求的弹框必要,所以笔者把它推荐出来,希望能给有供给的人带来扶助。

序言:对于Web开垦人士,弹出框和提示框的采用一定不会素不相识,举例大规模的表格新添和编写制定功效,一般常见的机要有二种管理情势:行内编辑和弹出框编辑。在增添用户体验方面,弹出框和提示框起珍视大的成效,假若您的系统有一个自个儿的弹出提醒框,自然能给用户很好的页面体验。前边几章介绍了bootstrap的多少个常用组件,那章来探视bootstrap里面弹出框和提醒框的管理。总的来说,弹出提醒首要分为二种:弹出框、鲜明裁撤提醒框、音讯提醒框。本篇就整合那三种档期的顺序分别来介绍下它们的使用。

介绍这些组件此前,能够先来看看bootstrap里面提示框的成效:

您或者感兴趣的稿子:

  • JS中confirm,alert,prompt函数使用分别深入分析
  • jQuery)扩张jQuery连串之1 模拟alert,confirm(1)
  • JS中confirm,alert,prompt函数区别深入分析
  • javascript学习笔记(十6) 系统对话框(alert、confirm、prompt)
  • 自编jQuery插件达成模拟alert和confirm

本文笔者将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件轻松易用,...

一、Bootstrap弹出框

韦德娱乐1946网页版 11

运用过JQuery UI应该清楚,它里面有1个dialog的弹出框组件,成效也很丰硕。与jQuery UI的dialog类似,Bootstrap里面也置于了弹出框组件。打开bootstrap 文书档案能够看出它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面包车型大巴,也等于说,只要大家引进了bootstrap的文本,就可以直接使用它的dialog组件,是否很有益。本篇大家就重组新添编写制定的职能来介绍下bootstrap dialog的施用。废话十分少说,直接看来它怎么利用啊。

壹、源码地址

1、cshtml分界面代码

<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">×</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">关闭</button>
  <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal">保存</button>
 </div>
 </div>
 </div>
 </div>

二、效果显示

最外面包车型大巴div定义了dialog的隐蔽。大家根本来看看第一层的div

韦德娱乐1946网页版 12

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

3、代码示例

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

所需引进的js和css

<div class="modal-dialog" role="document">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-dialog modal-full" role="document">
<link href="css/bootstrap.css" rel="external nofollow" rel="stylesheet" /> 
 <script src="js/jquery-1.11.3.js"></script> 
 <script src="js/bootstrap.js"></script> 
 <script src="js/bootstrap-confirmation.js"></script> 

第壹种象征私下认可类型的弹出框;第二种象征附加的弹出框;第两种表示满屏的弹出框。role="document"表示弹出框的对象的脚下的document。

 

2、js里面将dialog show出来。

初始化

暗许意况下,大家的弹出框是隐蔽的,只有在用户点击有些操作的时候才会show出来。来看看js里面是哪些管理的吗:

<button type="button" id="btn_submit1" class="btn btn-primary" style="margin: 100px;">

删除</button> 
 //注册新增按钮的事件
 $("#btn_add").click(function () {
 $("#myModalLabel").text("新增");
 $('#myModal').modal();
 });

js完结代码

对,你从未看错,只需求这一句就会show出那一个dialog.

<script type="text/javascript"> 
 $(function () { 
  $('#btn_submit1').confirmation({ 
   animation: true, 
   placement: "top", 
   title: "确定要删除吗?", 
   btnOkLabel: '确定', 
   btnCancelLabel: '取消', 
   onConfirm: function () { 
    alert("点击了确定"); 
   }, 
   onCancel: function () { 
    alert("点击了取消"); 

   } 
  }) 

 }); 


</script> 
$('#myModal').modal();

常用的品质。例如:

三、效果体现 新扩展效用

btnOkClass:鲜明开关的样式;
btnCancelClass:撤废按钮的样式;
singleton:是还是不是只同意出现叁个显著框;
popout:当用户点击任什么地点方的时候是还是不是隐伏分明框;
title:标题;
placement:放置地点;
onConfirm:确定事件;
onCancel:撤除事件;

韦德娱乐1946网页版 13

上述正是本文的全体内容,希望对我们的读书抱有帮忙,也盼望大家多多扶助脚本之家。

编辑效果

你或者感兴趣的小说:

  • 怎么选用Bootstrap的modal组件自定义alert,confirm和modal对话框
  • 集结Bootstrap自定义confirm提醒成效

韦德娱乐1946网页版 14

4、说明

弹出框突显后,点击分界面上别的地点以及按Esc键都能隐藏弹出框,那样使得用户的操作更是和睦。关于dialog里面关闭和保留开关的轩然大波的最先化在档案的次序里面一般是包装过的,这么些大家待会来看。

2、确认裁撤提醒框

那系列型的提示框一般用于某个需求用户明确本领拓展的操作,相比常见的如:删除操作、提交订单操作等。

1、使用bootstrap弹出框确认裁撤提示框

介绍那几个组件以前,就得说说组件封装了,大家知晓,像弹出框、确认撤销提醒框、消息提醒框那个东西品种里面确定是多处都要调用的,所以咱们必然是要卷入组件的。下边就来探望大家封装的衰竭裁撤提醒框。

(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">×Close</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">×Close</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这几个性情对应的章程。依旧来看看怎样调用吧:

 //注册删除按钮的事件
 $("#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里面注入点击按键后的回调事件。

扭转的效率:

韦德娱乐1946网页版 15

贰、bootbox组件的使用

在英特网找bootstrap的弹出组件时老是能够观察bootbox这么三个东西,确实是八个很简单的零件,依旧来探视怎么样运用呢。

自然要采纳它必供给增多组件喽。无非也是三种形式:引入源码和Nuget。

韦德娱乐1946网页版 16

接下去就是使用它了。首先当然是增加bootbox.js的引用了。然后正是在相应的地点调用了。

$("#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;
 })

 });

成效展示:

韦德娱乐1946网页版 17

韦德娱乐1946网页版 18

韦德娱乐1946网页版 19

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

3、在英特网还找到二个效应相比炫一点的提醒框:sweetalert

韦德娱乐1946网页版 20 

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

(1)文档

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

    <link href="~/Styles/sweetalert.css" rel="stylesheet" />
    <script src="~/Scripts/sweetalert.min.js"></script>

(3)js使用 

 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 () {

  }

  });
 });

(四)效果显示:

韦德娱乐1946网页版 21

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

韦德娱乐1946网页版 22

组件诸多,用哪一类园友没能够自行决定,可是博主以为像一些网络、电子商务类型的网址用sweetalert效果比较方便,一般的里边系统大概也用不上。

叁、操作达成提示框

1、toastr.js组件

至于新闻提醒框,博主项目中应用的是toastr.js这么一个零件,这些组件最大的补益就是异步、无阻塞,提醒后可设置没有时间,并且能够将音信提醒放到界面的一壹地点。先来看望效果。

韦德娱乐1946网页版 23

彰显在不一样职位:

top-center位置

韦德娱乐1946网页版 24

bottom-left位置

韦德娱乐1946网页版 25

至于它的利用。

(1)、引入js和css 

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

(2)、js初始化

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

将以此属性值设置为不一致的值就会让提醒消息突显在分歧的任务,如toast-bottom-right表示下右、toast-bottom-center表示下中、toast-top-center表示上中路,更过岗位音信请查看文档。

(3)、使用

//初始化编辑按钮
$("#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('只好采用1行进行编辑');
是或不是很粗大略~~这里的有二种方式分别对应两种分裂颜色的提醒框。

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

分级对应上图中的两种颜色的提醒框。

2、Messenger组件

在Bootstrap中文网里面涉及了三个alert组件:Messenger。

韦德娱乐1946网页版 26

它的应用和toastr.js那一个组件基本相似,只但是效果有一点不太一致。我们依旧来看看它是何等行使的。

(一)效果突显

能够一定到网页的不等地点,譬喻下图中付出的下中地点、上中职位。

韦德娱乐1946网页版 27

韦德娱乐1946网页版 28

提醒框的体制有三种意况:Success、Error、Info

韦德娱乐1946网页版 29

还要协理多样不相同体裁的提醒框:Future、Block、Air、Ice

韦德娱乐1946网页版 30

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

有关它的运用和toastr一模一样,首先引进组件:

<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" />

初步化它的任务

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

下一场js里面使用如下:

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

假如提醒框使用默许样式,也唯有一句就会一蹴即至 

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

比非常的粗略很结实大有木有~~

四、总结
上述花了多少个小时时间整理出来的两种常用bootstrap常用弹出和提醒框的效能以及采纳小结,希望对我们的学习抱有协助。

万1大家还想深刻学习,能够点击这里举行学习,再为大家附五个特出的专项论题:Bootstrap学习课程 Bootstrap实战教程

不久前新扩充补的一名目多数bootstrap基础教程,迎接咱们学习。

您恐怕感兴趣的篇章:

  • 在iframe中使bootstrap的模态框在父页面弹出标题
  • Bootstrap弹出框之自定义悬停框标题、内容和体裁示例代码
  • Bootstrap的popover(弹出框)二秒后定期消失的贯彻代码
  • 庞大bootstrap的modal模态框-动态拉长modal框-弹出七个modal框
  • Bootstrap达成提醒框和弹出框效果
  • Bootstrap实现拉动画过渡的弹出框
  • Bootstrap编写一个在现阶段网页弹出可关闭的对话框 非弹窗
  • Bootstrap弹出框(modal)垂直居中的难点及减轻方案详解
  • 有关Bootstrap弹出框不能调用难点的消除办法
  • bootstrap完毕点击删除按键弹出确认框的实例代码
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:何以利用Bootstrap的modal组件自定义alert韦德娱乐