jQuery Bootstrap美化彈出框

2021-09-02 17:20:24 字數 1097 閱讀 1653

專案中很多彈出的警告框是通過alert()彈出的瀏覽器警告框,樣式比較醜陋且和頁面使用的bootstrap框架樣式不吻合,因此需要修改彈出框樣式。

採用jquery+bootstrap的方式這樣彈出的警告框樣式也就不會跳出前台頁面框架。

jquery需要1.8以上,匯入jquery-confirm的css樣式檔案和js檔案,jquery、jquery-confirm.css、jquery-confirm.js,例項如下:

比如在ajax呼叫返回錯誤資料時彈出警告框,引入樣式和js檔案:

$.alert();
樣式如下:

如果是在bootstrap模態框中彈出警告框,那麼彈出的警告框寬度會和模態框寬度相同,就會比較醜,比如下面這樣:

可以看到彈出的警告框在聊天框中被拉長了,這樣就會比較醜,比較方便的做法是讓父級頁面來彈出警告框,這樣就不會受模態框的影響:

parent.$.alert();
現在的樣式如下:

類似的還有

1、dialog的彈出框:

$.dialog();
2、confirm確認框:

$.confirm(

},cancel: function()

}});

3、簡單用法:

$.alert('show here', '****** alert');

$.confirm('show here', '****** confirm');

$.dialog('****** dialog');

介面美化 CStatic控制項的美化

靜態控制項也是比較常用的控制項,在vs開發環境中用的應該挺頻繁的吧。其實mfc中實現對視窗美化,主要依賴於重繪。static控制項也是個視窗,windows為其留有自繪的權利,可以設定其樣式為ss ownerdraw,windows就會把其繪製權利交給我們的 怎麼繪製就看我們的 了。mfc中更好的一...

人臉美化隨筆2 美化演算法總結

想要站在巨人的肩膀上,首先要找的巨人。我可能是屬狗熊的,在玉公尺地裡掰乙個扔乙個,走到最後發現手裡神馬也木有。最近終於決定做乙個現代化的狗熊,將這些玉公尺串起來打包帶走,雖然並不知道這和現代化有神馬關係,但是這不重要。重要的是!我的行動硬碟壞了,所有資料瞬間清空,所以我發現硬體略不靠譜啊,寫在網上的...

MFC MDI和SDI美化 之客戶區美化

1 美化方式 貼圖,重繪背景 2 一 mdi客戶視窗 乙個mdi應用的主框架視窗包含乙個特殊的子視窗稱為mdiclient視窗。mdiclient視窗負責管理主框架視窗的客戶區。mdiclient視窗本身有自己的子視窗即由cmdichildwnd派生的文件視窗,也就是mdi子視窗。mdi主框架視窗負...