问题简述:

使用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
来源:简书

H5-Mui框架——修改mui.confirm样式的更多相关文章

  1. MUI框架-03-自定义MUI控件样式

    MUI框架-03-自定义MUI控件样式 开发请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 如何自定义MUI控件样式 mui 以 iOS 7的 UI 为基础,补充了 ...

  2. mui框架(二)

    1.底部导航切换界面 HTML部分: <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" ...

  3. 跨平台移动端APP开发---简单高效的MUI框架

    MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...

  4. MUI框架-06-静态页制作(图片轮播)

    MUI框架-06-静态页制作(图片轮播) 轮播也是静态,是相对页面交互来说 上一篇介绍了如何设计一个简单的界面,还没有接触过,请先查看: MUI框架-01-介绍-创建项目-简单页面 轮播组件 之前也介 ...

  5. MUI框架-05-用MUI做一个简单App

    MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...

  6. MUI框架-01-介绍-创建项目-简单页面

    MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架 官方文档:http://dev.dcloud.net.cn/mui/ui/ (1)MUI 介绍 MUI 是什么,解决了什么问 ...

  7. mui框架使用心得

    这段时间一直在用mui框架做项目,现在很多快速开发的app大部分是用MUI和APICloud开发的.所以我就把他们对比了一下. mui有自己的UI组件,我在项目中,很少用框架的UI组件,而使用框架的j ...

  8. 用mui框架开发手机app项目实践中的那些事儿

    http://www.yilingsj.com/xwzj/2015-04-29/260.html 最近在玩mui框架,坑的我是:西湖的水,全都是眼泪!!! 公司的手机app要进行改版,我率先想到的是j ...

  9. 初入APP(结合mui框架进行页面搭建)

      前  言 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下. 1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调.博主是个中度强迫症患者,顶部那个 ...

随机推荐

  1. 获取windows进程信息及CListCtrl控件(List Control)练习

    环境:VS2010/MFC/对话框 效果图: 目录: 1.  关于windows进程信息获取 2.  CListCtrl的使用 ------------------------------------ ...

  2. springboot-异步、发送邮件(一)

    pom.xml <!--邮件javax.mail--> <dependency> <groupId>org.springframework.boot</gro ...

  3. 关于SpringMVC映射模型视图的几点小事

    一.SpringMVC概述 SpringMVC为展现层提供的基于MVC设计理念的优秀的Web框架,是目前最主流的MVC框架之一. SpringMVC通过一套MVC注解,让POJO成为处理请求的控制器, ...

  4. Spark面试知识点-SparkSQL(1)

    0.介绍: (1)Spark SQL的前身是Shark,即Hive on Spark, 1.SparkSQL特点: (1)支持多种数据源:Hive,RDD,Parquet,JSON,JDBC等. (2 ...

  5. # 机器学习算法总结-第六天(Adaboost算法)

    SKlearn中的Adaboost使用 主要调的参数:第一部分是对我们的Adaboost的框架进行调参, 第二部分是对我们选择的弱分类器进行调参. 使用 Adaboost 进行手写数字识别 导入库,载 ...

  6. redis—持久化操作

    简介 Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富.有字符串,链表,集 合和有序集合.支持在服务器端计算集合的并,交和补集(d ...

  7. Spark学习(4)----ScalaTest

    一.例子: 1.一个简单例子:https://www.jianshu.com/p/ceabf3437dd7 2.Funsuite例子:https://www.programcreek.com/scal ...

  8. Logstash工作原理

    Logstash事件处理有三个阶段:inputs → filters → outputs.是一个接收,处理,转发日志的工具.支持系统日志,webserver日志,错误日志,应用日志,总之包括所有可以抛 ...

  9. 手摸手教你让Laravel开发Api更得心应手

    https://www.guaosi.com/2019/02/26/laravel-api-initialization-preparation/ 1. 起因 随着前后端完全分离,PHP也基本告别了v ...

  10. opengles reference card

    https://www.khronos.org/files/opengles31-quick-reference-card.pdf https://www.khronos.org/opengles/s ...