700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > jQuery+Bootstrap美化弹出框

jQuery+Bootstrap美化弹出框

时间:2023-12-06 21:52:14

相关推荐

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');

参考地址:/craftpip/jquery-confirm/

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。