jQuery+Bootstrap美化弹出框

- 日理万妓 2022-04-11 09:54 932阅读 0赞

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

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

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

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

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

样式如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rvbmd5dXh1MzQyNzE5_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rvbmd5dXh1MzQyNzE5_size_16_color_FFFFFF_t_70 1][]

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

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

现在的样式如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rvbmd5dXh1MzQyNzE5_size_16_color_FFFFFF_t_70 2][]

类似的还有

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/

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rvbmd5dXh1MzQyNzE5_size_16_color_FFFFFF_t_70]: /images/20220411/92c3954d34a74426b37a78c315d8e271.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rvbmd5dXh1MzQyNzE5_size_16_color_FFFFFF_t_70 1]: /images/20220411/78e7090f697c4ca289ea11e532d1fbdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rvbmd5dXh1MzQyNzE5_size_16_color_FFFFFF_t_70 2]: /images/20220411/62a9e8755eaf46c4a922145e9068b61c.png