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 來源：簡書