[Java教程]Bootstrap实现弹出框和提示框效果代码
你的位置：
[Java教程]Bootstrap实现弹出框和提示框效果代码
一、Bootstrap弹出框使用过JQuery UI应该知道，它里面有一个dialog的弹出框组件，功能也很丰富。与jQuery UI的dialog类似，Bootstrap里面也内置了弹出框组件。打开bootstrap 文档可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面的，也就是说，只要我们引入了bootstrap的文件，就可以直接使用它的dialog组件，是不是很方便。本篇我们就结合新增编辑的功能来介绍下bootstrap dialog的使用。废话不多说，直接看来它如何使用吧。1、cshtml界面代码?123456789101112131415161718192021222324252627282930313233&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&最外面的div定义了dialog的隐藏。我们重点来看看第二层的div?1&div class="modal-dialog" role="document"&这个div定义了dialog，对应的class有三种尺寸的弹出框，如下：?123&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里面是如何处理的吧：?12345//注册新增按钮的事件&$("#btn_add").click(function () {&&$("#myModalLabel").text("新增");&&$('#myModal').modal();&});对，你没有看错，只需要这一句就能show出这个dialog.?1$('#myModal').modal();3、效果展示新增效果编辑效果4、说明弹出框显示后，点击界面上其他地方以及按Esc键都能隐藏弹出框，这样使得用户的操作更加友好。关于dialog里面关闭和保存按钮的事件的初始化在项目里面一般是封装过的，这个我们待会来看。二、确认取消提示框这种类型的提示框一般用于某些需要用户确定才能进行的操作，比较常见的如：删除操作、提交订单操作等。1、使用bootstrap弹出框确认取消提示框介绍这个组件之前，就得说说组件封装了，我们知道，像弹出框、确认取消提示框、信息提示框这些东西项目里面肯定是多处都要调用的，所以我们肯定是要封装组件的。下面就来看看我们封装的缺乏取消提示框。?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153(function ($) {&&window.Ewin = function () {&&var html = '&div id="[Id]" role="dialog" aria-labelledby="modalLabel"&' +&&&&&&&&'&div &' +&&&&&&&&&'&div &' +&&&&&&&&&&'&div &' +&&&&&&&&&&&'&button type="button" data-dismiss="modal"&&span aria-hidden="true"&&&/span&&span &Close&/span&&/button&' +&&&&&&&&&&&'&h4 id="modalLabel"&[Title]&/h4&' +&&&&&&&&&&'&/div&' +&&&&&&&&&&'&div &' +&&&&&&&&&&'&p&[Message]&/p&' +&&&&&&&&&&'&/div&' +&&&&&&&&&&'&div &' +&&'&button type="button" data-dismiss="modal"&[BtnCancel]&/button&' +&&'&button type="button" data-dismiss="modal"&[BtnOk]&/button&' +&'&/div&' +&&&&&&&&&'&/div&' +&&&&&&&&'&/div&' +&&&&&&&'&/div&';&&&&var dialogdHtml = '&div id="[Id]" role="dialog" aria-labelledby="modalLabel"&' +&&&&&&&&'&div &' +&&&&&&&&&'&div &' +&&&&&&&&&&'&div &' +&&&&&&&&&&&'&button type="button" data-dismiss="modal"&&span aria-hidden="true"&&&/span&&span &Close&/span&&/button&' +&&&&&&&&&&&'&h4 id="modalLabel"&[Title]&/h4&' +&&&&&&&&&&'&/div&' +&&&&&&&&&&'&div &' +&&&&&&&&&&'&/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这个属性对应的方法。还是来看看如何调用吧：?123456789101112131415161718192021222324252627282930313233//注册删除按钮的事件$("#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里面注入点击按钮后的回调事件。生成的效果：2、bootbox组件的使用在网上找bootstrap的弹出组件时总是可以看到bootbox这么一个东西，确实是一个很简单的组件，还是来看看如何使用吧。当然要使用它必须要添加组件喽。无非也是两种方式：引入源码和Nuget。接下来就是使用它了。首先当然是添加bootbox.js的引用了。然后就是在相应的地方调用了。?123456789101112131415161718$("#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 =&&&})&&&bootbox.confirm("确认删除", function (result) {&&&&var strResult =&&&})&&&&&&});效果展示：更多用法可以参见api。使用起来基本很简单。这个组件最大的特点就是和bootstrap的风格能够很好的保持一致。3、在网上还找到一个效果比较炫一点的提示框：sweetalert&要使用它，还是老规矩：Nuget。（1）文档（2）在cshtml页面引入js和css&&& &link href="~/Styles/sweetalert.css" rel="stylesheet" /&&&& &script src="~/Scripts/sweetalert.min.js"&&/script&（3）js使用&　　　　?1234567891011121314151617181920212223242526272829swal({&&&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）效果展示：点击确定后进入回调函数：组件很多，用哪种园友没可以自行决定，不过博主觉得像一些互联网、电子商务类型的网站用sweetalert效果比较合适，一般的内部系统可能也用不上。三、操作完成提示框1、toastr.js组件关于信息提示框，博主项目中使用的是toastr.js这么一个组件，这个组件最大的好处就是异步、无阻塞，提示后可设置消失时间，并且可以将消息提示放到界面的各个地方。先来看看效果。显示在不同位置：top-center位置bottom-left位置关于它的使用。（1）、引入js和css&?12&link href="~/Content/toastr/toastr.css" rel="stylesheet" /&&script src="~/Content/toastr/toastr.min.js"&&/script&（2）、js初始化?123&script type="text/javascript"&&&toastr.options.positionClass = 'toast-bottom-right';&&/script&将这个属性值设置为不同的值就能让提示信息显示在不同的位置，如toast-bottom-right表示下右、toast-bottom-center表示下中、toast-top-center表示上中等，更过位置信息请查看文档。（3）、使用?12345678910111213141516//初始化编辑按钮$("#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('只能选择一行进行编辑');('info');分别对应上图中的四种颜色的提示框。2、Messenger组件在Bootstrap中文网里面提到了一个alert组件：Messenger。它的使用和toastr.js这个组件基本相似，只不过效果有点不太一样。我们还是来看看它是如何使用的。（1）效果展示可以定位到网页的不同位置，例如下图中给出的下中位置、上中位置。提示框的样式有三种状态：Success、Error、Info并且支持四种不同样式的提示框：Future、Block、Air、Ice（2）组件使用以及代码示例关于它的使用和toastr大同小异，首先引入组件：?123&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" /&初始化它的位置?12345&script type="text/javascript"&&$._messengerDefaults = {&&extraClasses: 'messenger-fixed messenger-theme-future messenger-on-bottom messenger-on-right'&}&/script&然后js里面使用如下：?123456789$("#btn_delete").click(function () {&&$.globalMessenger().post({&&&message: "操作成功",//提示信息&&&type: 'info',//消息类型。error、info、success&&&hideAfter: 2,//多长时间消失&&&showCloseButton:true,//是否显示关闭按钮&&&hideOnNavigate: true //是否隐藏导航&});});如果提示框使用默认样式，也只有一句就能解决　?1234$.globalMessenger().post({&&&message: "操作成功",//提示信息&&&type: 'info',//消息类型。error、info、success&});很简单很强大有木有~~
、 、 、 、 、木其网络科技专业程序员代写
程序员学历擅长经验网店链接
硕士ASP.NET PHP 电子 通信设计 图像 编程 网络5年
本科C语言 C++面向对象 Java3年
本科Java Web项目 JSP Hibernate Struts Mysql4年
日期：&&来源：
并不是单单意味着HTML/CSS界面框架，更确切的说，它改变了整个游戏规则。这个囊括了应有尽有的代码框架使得许多应用和网站的设计开发变得简便许多，而且它将大量的HTML框架普及成了产品。
可悲的是，它纯粹的功能唤起了我们本能的懒惰，很多人始终坚持使用它的默认设置。现在，你要知道，这些经过丰富想象力的默认样式和布局网格都不差，他们都是Twitter team花费了大量时间和精力的产物。他们是坚实的基础。
但是，Bootstrap的真谛是“基石”。Bootstrap框架，并不意味着它是全部终结解决方案。这个规则的一个例外可能是，如果你在内部开发了些东西，是公众看不到的。但是即使这样，你的想法会将人们带的更远，甚至改变一切。
Bootstrap的开发者们确实做了非常棒的工作，使得很多事情变得简单，他们的代码被模块化，你可以下载框架的独立组件。他们在网站上甚至提供了一款，允许你编辑变量。
其余的，则决定于我们。一些真正的设计者和开发者已经加紧创建工具和变更，我们没有理由落于人后。现在已经没有借口再去使用Bootstrap的默认设定了。
Bootstrap 变更
以下是一系列变更已经非常成熟了，可以将你基本的bootstrap变得不再是你熟识的那个样子。这些变更的使用可能有些限制，也有些是在特定条件下使用的，但是如果他们符合你的需求，他们会为你省下不少时间和金钱。
第一种变更就是（扁平化设计界面），由发布。Flat UI迅速普及开来，在设计界有很好的理由：那就是它做的很漂亮。它是为那些偏爱扁平化设计的人存在的 - 与Bootstrap多少有些的拟物化设计正相反
- 每一个UI元素都被依据崭新的美学重新设计了。
矢 量图标，一个新的字形图标字体，自定义的UI元素（类似于to-do list）和多种改变起来非常容易的颜色主题，Flat UI让我，可能许多人也一样，重新设想Bootstrap可以如何展现。我经常觉得，基本的段落元素中的文本大小对于网站而言有些小，说句公道话，我觉得 他们只适合于应用程序的界面，在应用程序的界面里，你可以将文本放在狭小的空间里。
Flat UI是免费的，但是你可以使用付费的专业版本，专业版本中有附加元素，功能和PSD文件。
Fbootstrapp
记得我之前说过有些变更是有特定使用条件的？我当然不是玩笑的。已经完全重新开发用于兼容Facebook的用户界面元素。
为 什么要这么做呢？用他们自己的话说就是“Fbootstrapp是一套发起了Facebook iFrame应用开发的工具包。它包括了基本的排版，表格，按钮，表单，网格，导航和更多元素的CSS和HTML样式，让他们看起来和体验起来都和典型的 Facebook一样”。
Facebook的开发者们，注意，你们的工作开始变得简单了。
Jumpstart UI 管理模板
Bootstrap主要是用于应用，如果你想要将它在经典的“管理员界面”上应用，你还需要额外的工作。为你带来三种不同的模板，让你不再费力。
管理员UI图标，小部件的样式，基于jQuery的数据可视化插件还有更多其他的，被引入了干净的，可自定制的，全响应布局中。
这种变更不同于其他的最大一点是，它没有任何免费的版本，而必须付费才能使用。它只需要15到20美元，与它可以实现的功能，以及它符合你的特殊需求这两点而言，这个价格非常的划算。
有些人喜欢它，但更多人厌恶它，但是不可否认的是Windows 8和其Metro UI在设计界引起了轰动。我并不认为这种UI有特别的用处（一些软件商店除外），不过我们有一个！
它是免费的，而且看起来特性完善，所以放心使用吧。对于大多数人而言，他可能不是特别有用，但是他是一种新奇的代码体验。
Bootstrap客制化工具
所以你想引导你的Bootstrap更好的达到你的UI需求，你要如何开始？你当然可以直接看代码，我可以告诉你，这样做是非常困难的。
如果你想手动改变所有的排版，或者是按钮，链接颜色，又或者是导航样式，你可以在Bootstrap网站上的客制化应用中编辑所有的变量，但是你必须知道所 有颜色的HEX代码，而且当你做改变的时候，你看不到任何的可视性返回，也就是说你在修改的时候，完全不可预见你编辑后的样子是什么样的。
但是幸运的是，现在有很少一部分Bootstrap主题创作者为了这种客制化需求，特别做出了一些工具。以下是我至今认为最好的两种。
StyleBootstrap
如果你忽略笨拙的界面，StyleBootStrap是款很强大的工具，用于编辑你可以在框架总见到的大多数默认UI元素。
Bootstrap Magic
Bootstrap Magic是一款帮助你重塑架构的工具。它的界面简单友好，比StyleBootstrap可以微调更多的元素。因此，它需要更多的时间，但是它比起手动修改所有元素还是节省了不少时间。
插件& & 片段
有些东西是Bootstrap没有的，但是对我们而言却是非常重要的。首先是图标。
Font Awesome
Bootstrap提供的图像字符图标非常酷，但是却很有限。你有一个“黑暗”图标，还会有一个“光亮”图标，这些都是一个可爱的小精灵图像。但是图标字体，应该更为灵活。 任何你可以用CSS3做的编辑，在这些图标上也都应该可以实现。比如改变颜色，给他们加上一个阴影，像写CSS一样简单。可以现在可以为361个图标进行这样的修改。
是一个HTML片段库，与Bootstrap结合使用，并且不需要添加其他库。片段包括：注册和登陆表单，日历，类似Gmail的e-mail界面，media player界面，甚至更多。
这并不是全部
Twitter宠爱的模板越来越被广泛适应，也许在自定义Bootstrap上有更多的方法，更多的信息，是我的列表乃至任何列表中都没有的。毕竟，互联网就是为此而存在的，对吧？
阅读(...) 评论()
木其网络科技专业程序员代写
程序员学历擅长经验网店链接
硕士ASP.NET PHP 电子 通信设计 图像 编程 网络5年
本科C语言 C++面向对象 Java3年
本科Java Web项目 JSP Hibernate Struts Mysql4年当前位置： &
求翻译：at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:431)是什么意思？
at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:431)
问题补充：
org在Apache_____________________娜Startup.Bootstrap主要(Bootstrap java:431)
（org.apache.catalina.startup.Bootstrap.main Bootstrap.java：431）
org在Apache_____________________娜Startup.Bootstrap主要(Bootstrap java:431)
在org.apache.catalina.startup。Bootstrap.main (Bootstrap.java ：431)
在 org.apache.catalina.startup.Bootstrap.main （Bootstrap.java:431）
我来回答：
参考资料：
* 验证码：
登录后回答可以获得积分奖励，并可以查看和管理所有的回答。 |
我要翻译和提问
请输入您需要翻译的文本！再发一贴，请问一下，JSF可以结合Bootstrap用么？【java吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：611,628贴子：
再发一贴，请问一下，JSF可以结合Bootstrap用么？收藏
ＲＴ，要求用JSF写界面，但觉得JSF的按钮什么的效果不是很好看，想用Bootstrap可以么？如果不可以的话，用什么工具？请教。。。（表又沉啊！！！）
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或