JS组件Bootstrap实现了弹出框和提示框的效果代码

对于Web开发人员来说，弹出框和提示框的使用肯定会很熟悉，比如常用的添加和编辑表格的功能。一般主要有两种处理方式：直列编辑和弹出框编辑。弹出框和提示框在增强用户体验方面发挥着重要作用。如果你的系统有友好的弹出提示框，自然会给用户很好的页面体验。前几章介绍了bootstrap的几个常见组件。本章将介绍bootstrap中弹出框和提示框的处理。一般来说，弹出提示有三种：弹出框、确认取消提示框和信息提示框。本文将分别介绍这三种类型的用法。

一、引导弹出框。

使用JQuery UI后，应该知道它有一个功能丰富的对话框弹出框组件。类似于jQuery UI的对话框，Bootstrap也有内置的弹出组件。打开bootstrap文档，可以看到它的对话框直接嵌入到bootstrap.js和bootstrap.css中，也就是说只要我们引入bootstrap文件，就可以直接使用它的对话框组件。方便吗？在本文中，我们将结合新添加的编辑功能介绍引导对话框的使用。二话没说，让我们看看它是如何直接使用的。

1.cshtml接口代码。

Div class=' modal fade ' id=' myModal ' tabindex='-1 '角色=' dialog ' aria-labelledby=' myModalLabel ' Div class=' modal-dialog '角色=' document ' Div class=' moda l-content ' Div class=' modal-header '按钮类型=' button ' class=' Close ' data-misse=' modal ' aria-Label=' Close ' span aria-hidden=' true '/span/H4 class=' modal-title ' id=' myModalLabel ' add/H4 标签输入类型=' text ' name=' txt _ parent department ' class=' form-control ' id=' txt _ parent department '占位符='上级部门'/Div class=' form-group '标签为=' txt _ departmentlevel '部门级别/标签输入类型=' text ' name=' txt _ department level ' class=' form-control ' id=' txt _ department level '占位符='部门级别'/Div class=' form-group '的标签为=' txt _ statu ' description/labe input type=' text ' name=' txt _ statu ' class=' form-control ' id=' txt _ statu ' placeholder=' status '/div/div class=' modal-footer '按钮类型=' button ' class=' BTN BTN-default ' data-dispose=' modal ' span class=' glyphicon glyphicon-remove ' aria-hidden=' true/span close/button类型=' button ' id=' btn 让我们关注第二层的div。

Class=' modal-dialog '角色=' document '这个div定义了一个对话框，对应的类有三种大小的弹出框，如下所示：

Div class=' modal-dialog '角色=' document ' div class=' modal-dialog modal-LG '角色=' document ' div class=' modal-dialog modal-full '角色=' document '第一个弹出框表示默认类型；第二个表示放大的弹出框；第三种类型代表全屏弹出框。角色='document '表示弹出窗口对象的当前文档。

2.在js中显示对话框。

默认情况下，我们的弹出框是隐藏的，只有当用户点击一个操作时才会显示。让我们看看js是如何处理的：

//注册新按钮的事件$(“# BTN _ add”)。click(function(){ $(' # mymodallabel '))。文本(' add ')；$('#myModal ')。modal()；});是的，你没有弄错。你只需要这个句子来显示这个对话框。

$('#myModal ')。modal()；3.效果显示增加效果。

编辑效果

4.描述。

弹出框显示后，点击界面上的其他地方，按Esc键就可以隐藏弹出框，让用户的操作更加友好。对话框中关闭和保存按钮事件的初始化通常封装在项目中，我们将在后面看到。

其次，确认取消提示框。

这种类型的提示框一般用于一些需要用户确认的操作，如删除操作、提交订单等。

1.使用引导弹出框确认并取消提示框。

在介绍这个组件之前，我们必须谈谈组件封装。我们知道弹出框、确认取消提示框、信息提示框之类的东西很多地方都要调用，所以我们肯定要封装组件。让我们看看我们封装的缺件取消提示框。

（函数($) { 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-dispose=' modal ' span aria-hidden=' true '/span span class=' 仅Sr-close/span/button ' ' H4类=' modal-Title ' Id=' var dialogdHtml=' div Id='[Id]' class=' modal fade '角色=' dialog ' aria-labelledby=' modalLabel ' ' ' div class=' modal-dialog ' ' ' div class=' modal-content ' ' ' div class=' modal-header ' ' ' button type=' button ' class=' close '数据-discover=' modal ' span aria-隐藏=' true '/span class=' Sr-only ' close/span/button ' ' H4 class=' modal-Title ' Id=' modalLabel '[Title]新RegExp('\\[([^\\[\\]]*？ )\\]'、' IgM ')；var generateId=function(){ var Date=new Date()；返回“MDL”日期。()的值；} var init=function(options){ options=$ .扩展({}，{ title: '操作提示，消息： '提示内容，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]；});$(“正文”).追加（内容);$(“#”modalId).modal({ width: options.width，back drop : ' static ' })；$(“#”modalId).on('hide.bs.modal '，function (e) { $('body ').查找(' #' modalId).移除();});返回modalId}返回{ alert:函数（选项){ options类型==' string '){ options={ message : options }；} var id=init(选项);var modal=$(" # " id)；modal.find(' .ok ').removeClass('btn-success ').add class(' BTN-primary ')；modal.find(' .取消")。hide()；返回{ id: id，函数(回调){ if(回调实例of Function) { modal.find(').ok ').click(function(){ callback(true))；});} }，hide:函数（回调){ if(回调实例of Function){ modal。on(' hide。bs。' modal '，函数(e){回调(e)}；});} } };}，确认：函数（选项){ var id=init(选项);var modal=$(" # " id)；modal.find(' .ok ').removeClass('btn-primary ').addCLaSS(' BTN-成功')；modal.find(' .取消")。show()；返回{ id: id，函数(回调){ if(回调实例of Function) { modal.find(').ok ').click(function(){ callback(true))；});modal.find(' .取消")。单击(function(){回调(false))；});} }，hide:函数（回调){ if(回调实例of Function){ modal。on(' hide。bs。' modal '，函数(e){回调(e)}；});} } };}，dialog:函数（选项){ options=$ .extend({}，{ title: 'title '，url: ' '，width: 800，height: 550，onread : function(){ }，onShown: function (e) { }，options | | { })；var modalId=generateId()；var content=dialogdhtml。replace(reg，function (node，key) { return { Id: modalId，title : options。title }[key]；});$(“正文”).追加（内容);var target=$(' # ' Modalid)；target.find(' .模态体')。加载(选项。网址)；if(选项。onready())选项。一路上。通话(目标)；目标。modal()；目标。打开('显示。bs。' modal '，函数(e){ if(options。onready(e))选项。一路上。通话(目标，e)；});target.on('hide.bs.modal '，function (e) { $('body ')).查找（目标)。移除();});} } }();})(jQuery)；不了解组件封装的朋友可以先看看相关文章。

我们这里的确认取消提示框主要使用属性确认对应的方法。让我们看看如何调用：

//注册删除按钮的事件$(“# BTN _删除”)。单击(函数(){//获取所选行数据var arr selections=$(' # TB _ departments ')。引导表(“获取选择”)；If (arr选择。长度=0) {toastr。警告('请选择有效数据')；返回；} Ewin.confirm({ message: '您确定要删除所选数据吗？'}).on(函数(e) { if(！e) {返回；} $.ajax({ type: 'post '，URL : '/API/DepartmentApi/Delete '，data : { ' : JSON . stringify(arr selections)}，success:函数(数据，Status){ if(Status=' success ')} { to astr。成功(“数据提交成功”)；$('#tb_departments ')。bootstrapTable('刷新')；} }，Error : function(){ toastr . Error(' Error ')；}，complete : function(){ } })；});});消息属性发送提示信息，并在点击按钮后注入回调事件。

生成的效果：

2.使用bootbox组件。

在网上找bootstrap的弹出组件的时候，总能看到bootbox这种东西，确实是一个很简单的组件。让我们看看如何使用它。

当然，您必须添加组件才能使用它。只有两种方法：引入源代码和Nuget。

下一步是使用它。第一步是添加对bootbox.js的引用.然后在相应的地方调用。

$('#btn_delete ')。单击(function(){ var arr selections=$(' # TB _ departments ')。bootstrapTable(' getSelections ')；If (arr选择。长度=0) {toastr。警告('请选择有效数据')；返回；} bootbox.alert('确认删除'，function(){ var strResult=' '；}) bootbox.prompt('确认删除'，函数(结果){ varstrresult=result}) bootbox.confirm('确认删除'，函数(结果){ var strresult=result}) });效果显示：

更多用法见api。它基本上很容易使用。这个组件最大的特点是可以和bootstrap保持同样的风格。

3.我还在网上找到了一个效果更亮的提示框：sweetalert。

照常使用：Nuget。

(1)文件。

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

link href=' ~/Styles/sweet alert . CSS ' rel='样式表'/脚本src=' http : ~/Scripts/sweet alert . min . js '/脚本

(3)js的使用。

Swal({ title: '操作提示'，//弹出框的title text: '确定要删除吗？'，//弹出框中的提示文字为type: 'warning '，//弹出框类型为showcancelbutton3360true，//是否显示取消按钮confirmbuttoncolor3360' # dd6b55 '，//确认按钮颜色cancelButtonText:' cancel '，//取消按钮文字confirmButtonText:' yes。//确认文档closeonconfirm:true }，function () {$。Ajax ({type:' post '，url3360'/home/delete '， {'':JSON。Stringify (arr selections)}，success3360函数(数据，状态){if(状态==' success') {toastr。成功(“数据提交成功”)；$('#tb_departments ')。bootstrapTable('刷新')；} }，Error : function(){ toastr . Error(' Error ')；}，complete : function(){ } })；});(4)效果显示：

点击确定进入回拨功能：

组件很多，你无法决定用哪种园林朋友。不过，博主认为一些像互联网、电商这样的网站更适合使用sweetalert，一般的内部系统可能也用不上。

三.操作完成提示框。

1.toastr.js组件。

关于消息提示框，blogger项目使用了toastr.js这样的组件，这个组件最大的优点就是异步、非阻塞。提示后可以设置消失时间，界面上各个地方都可以放置消息提示。先看看效果。

显示在不同的位置：

顶部中心位置

左下角位置。

关于它的用途。

(1)介绍js和css。

link=' ~/content/toastr/toastr . CSS ' rel='样式表'/脚本src=' http : ~/content/toastr/toastr . min . js '/脚本(2)，js初始化。

脚本类型=' text/JavaScript ' to astr . options . position class=' toast-右下角'；/script将该属性值设置为不同的值，可以使提示信息显示在不同的位置，如右下吐司-右下，中下吐司-下中，中上吐司-上中。请检查文档中的位置信息。

(3)使用。

//初始化编辑按钮$ ('# BTN _编辑')。单击(function(){ var arr selections=$(' # TB _ departments ')。引导表(“获取选择”)；if(arr selections . length 1){ toastr . warning('只能选择一行进行编辑')；返回；} if (arrselections。长度=0) {toastr。警告('请选择有效数据')；返回；} $('#myModal ')。modal()；});使用以下句子：

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

Toastr.success(数据提交成功)；toastr . Error(' Error ')；Toastr.warning('只能选择一行进行编辑')；toastr . info(' info ')；对应上图四种颜色的提示框。

2.信使组件。

Bootstrap中文网站中提到了一个提醒组件Messenger。

它的使用和toastr.js基本类似，但是效果有点不一样。让我们看看它是如何使用的。

(1)效果展示。

您可以导航到网页上的不同位置，例如下图所示的中下位置和上中位置。

提示框的样式有三种状态：成功、错误、信息。

并支持四种不同风格的提示框：未来、区块、空气和冰。

(2)组件使用和代码示例。

关于它的用途，它类似于toastr。首先，介绍组件：

script src=' http : ~/Content/HubSpot-messenger-a3df 9 a 6/build/js/messenger . js '/script link href=' ~/Content/HubSpot-messenger-a3df 9 a 6/build/CSS/messenger . CSS ' rel='样式表'/link href=' ~/Content/HubSpot-messenger-a3df 9 a 6/build/CSS/messenger-theme-future . CSS ' rel='样式表'/初始化其位置。

脚本类型=' text/JavaScript' $。_ messenger默认值={ extra class : ' messenger-fixed messenger-theme-future messenger-on-bottom messenger-on-right ' }/脚本和js使用如下：

$ ('# BTN _删除')。单击(function () {$)。globalmessenger()。post ({message: '操作成功'，//提示消息类型： 'info '，//消息类型。错误，信息，成功隐藏： 2，///消失需要多长时间？//是否显示关闭按钮hideOnNavigate: true //是否隐藏导航})；});如果提示框使用默认样式，只有一句话可以解决。

$.globalmessenger()。post ({message: '操作成功'，//提示消息类型： 'info '，//消息类型。错误、信息、成功})；它非常简单和强大。有木头和木头~ ~

4.总结几个常用的引导弹出和提示框的效果和使用总结，花了几个小时整理，希望对大家的学习有所帮助。

如果你还想深入学习，可以点击这里学习，然后为你附上两个精彩的话题：Bootstrap学习教程Bootstrap实用教程。

欢迎您学习一系列新添加的引导基础教程。