專案中很多彈出的警告框是通過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/