jQuery+Bootstrap美化弹出框

项目中很多弹出的警告框是通过alert()弹出的浏览器警告框，样式比较丑陋且和页面使用的Bootstrap框架样式不吻合，因此需要修改弹出框样式。

采用jQuery+Bootstrap的方式这样弹出的警告框样式也就不会跳出前台页面框架。

jquery需要1.8以上，导入jquery-confirm的css样式文件和js文件，jQuery、jquery-confirm.css、jquery-confirm.js，实例如下：

比如在ajax调用返回错误数据时弹出警告框，引入样式和JS文件：

<link rel="stylesheet" type="text/css"href="${ctx}/common/css/jquery-confirm.css">
<script type="text/javascript"src="${ctx}/webResources/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript"src="${ctx}/common/js/jquery-confirm.js"></script>

$.alert({title: '警告',content: '您已掉线，请重新进入聊天室...'
});

样式如下：

如果是在Bootstrap模态框中弹出警告框，那么弹出的警告框宽度会和模态框宽度相同，就会比较丑，比如下面这样：

可以看到弹出的警告框在聊天框中被拉长了，这样就会比较丑，比较方便的做法是让父级页面来弹出警告框，这样就不会受模态框的影响：

parent.$.alert({title: '警告',content: '模态框内弹出警告框'
});

现在的样式如下：

类似的还有

1、dialog的弹出框：

$.dialog({title: 'dialog',content: 'Dialog!',
});

2、confirm确认框：

$.confirm({title: 'Show confirm box',content: 'Here is the information',type: 'green',buttons: {   ok: {text: "ok!",btnClass: 'btn-primary',keys: ['enter'],action: function(){console.log('confirmed!');}},cancel: function(){console.log('canceled!');}}
});

3、简单用法：

$.alert('Show here', 'Simple alert');
$.confirm('Show here', 'Simple confirm');
$.dialog('Simple dialog');

参考地址：https://github.com/craftpip/jquery-confirm/

jQuery+Bootstrap美化弹出框相关推荐

Bootstrap：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
JS组件Bootstrap实现弹出框和提示框效果代码
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
swal 美化弹出框
美化弹出框,同时还能在回调函数中写处理代码 swal({title: "确认删除?",text: "Your will not be able to recover th ...
bootstrap model弹出框的使用
原文地址为: bootstrap model弹出框的使用之前,我们讲解了bootstrap tab的使用,今天我们来了解下bootstrap 中model弹出窗的使用. 效果: 代码: <in ...
android 气球菜单,jQuery实现气球弹出框式的侧边导航菜单效果
本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷 ...
Bootstrap实现弹出框和提示框效果代码
一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打 ...
php jquery 弹窗提示框,jQuery实现消息弹出框效果
本文实例为大家分享了jQuery消息弹出框的具体代码,供大家参考,具体内容如下效果图实现代码 .showMessage { padding: 5px 10px; border-radius: 5p ...
jQuery实现简单弹出框
功能点 1.点击"更多"出现弹出框 2.点击下拉列表触发回调 3.点击空白区域收起弹出框效果演示 PS:鼠标右键效果图`另存为`到本地 ,再将图片后缀gif改为rar即可得到完整 ...
Bootstrap方法为页面添加一个弹出框
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...

jQuery+Bootstrap美化弹出框

jQuery+Bootstrap美化弹出框相关推荐

最新文章

热门文章