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 来源：简书