H5-Mui框架——修改mui.confirm樣式

問題簡述：

使用mui框架默認提示框時，感覺與整體布局不符，因此想要更改其中的樣式。
首先，查了一下資料：mui.toast樣式風格及位置修改教程

以下是轉載過來的文章內容。

=================== 我是完美的分割線 ===================
使用了mui.toast來實現可自動消失的信息提示效果。

但默認的顯示效果太差了，很不顯示，而且是在底部的。

如下圖：

image

想改到屏幕的中間位置，再改大一點。

但官方並沒有相關的文檔教程，論壇也沒找到相關的教程。

只好自己研究，最終發現。

消息框的DIV類為

<div class="mui-toast-container"> <div class="mui-toast-message"> </div> </div> 

所以，就可以通過修改CSS來改變了。

我改后的最終效果如下：

image

CSS代碼如下：

/*toast信息提示*/ .mui-toast-container {bottom: 50% !important;} .mui-toast-message {background: url(/app/themes/default/images/toast.png) no-repeat center 10px #000; opacity: 0.6; color: #fff; width: 180px; padding: 70px 5px 10px 5px;} 

=================== 我是完美的分割線 ===================

這篇文章基本簡述了問題的解決思路：

找到對應的提示框樣式，然后進行重寫即可。

根據上面的思路，我進行了另一番嘗試。

很明顯，使用mui.alert時，mui是為我們動態建立了一個DOM節點

實例效果圖

實例代碼段

<div class="mui-popup mui-popup-in" style="display: block;"> <div class="mui-popup-inner"> <div class="mui-popup-title"> Hello MUI </div> <div class="mui-popup-text"> MUI是個好框架，確認？ </div> </div> <div class="mui-popup-buttons"> <span class="mui-popup-button">否</span> <span class="mui-popup-button mui-popup-button-bold">是</span> </div> </div> 

從上面的實例我們可以看出，我們寫入的內容是被直接插入到DOM樹中的。

那么我們可以嘗試着這樣寫：

// javscript document.getElementById("confirmBtn").addEventListener('tap', function() { var btnArray = ['否', '是']; mui.confirm( '<span class="muiSpan">MUI</span>是個好框架，確認？', 'Hello MUI', btnArray, function(e) { if (e.index == 1) { info.innerText = '你剛確認MUI是個好框架'; } else { info.innerText = 'MUI沒有得到你的認可，繼續加油' } }) }); 

// css .muiSpan { color: red; } 

效果圖

作者：烏匠
鏈接：https://www.jianshu.com/p/df976c75da53
來源：簡書