问题简述:

使用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. Oracle 以及 PLSQL安装

    今天重装系统遇到oracle 安装的问题咯 ,oracle安装过程中很多疑难杂症咯 1如果之前装过,记得去删除注册表的Oracle 相关的文件 ,请百度有很多教程咯 2这个必须要勾选的!因为的是11g ...

  2. Python爬取爱奇艺资源

    像iqiyi这种视频网站,现在下载视频都需要下载相应的客户端.那么如何不用下载客户端,直接下载非vip视频? 选择你想要爬取的内容 该安装的程序以及运行环境都配置好 下面这段代码就是我在爱奇艺里搜素“ ...

  3. 1.SpringMVC 概述

    SpringMVC 简介 SpringMVC 也叫 Spring web mvc ,属于表现层的框架.SpringMVC 是 Spring框架的一部分,是在Spring3.0后发布的 第一个Sprin ...

  4. linux 下安装 jdk1.7

    1.官网 下载jdk7版本 地址: http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-jav ...

  5. Django项目上线的准备工作

    settings文件配置 添加上STATIC_ROOT = os.path.join(BASE_DIR, "/static/") 我的配置项目文件的最终 STATIC_URL = ...

  6. 地沟油jiance

    与地沟油较劲九年(我和我的祖国) 任  飞 2019年06月13日05:00  来源:人民网-人民日报 分享到:     地沟油中含有多种有毒有害物质,但地沟油的检测却是一大难题.单靠眼睛谁也无法判断 ...

  7. 三种方式构建C#单例模式

    /// <summary> /// 双检锁实现单例 /// </summary> public sealed class SingletonDoubleCheck { //s_ ...

  8. Caffe---Pycaffe转换均值文件:xxx_mean.binaryproto成为xxx_mean.npy

    Pycaffe转换均值文件:xxx_mean.binaryproto成为xxx_mean.npy 为什么需要mean.binaryproto转mean.npy? 使用Caffe的C++接口进行操作时, ...

  9. redis + boost.asio

    redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  10. 一个线程相关的高CPU占用问题的定位

    最近在重构项目代码时,发现两个线程同时访问一个加锁的std::list队列时,会出现恶性竞争锁的现象. 具体现象是A线程总是拿不到锁,B线程抢占几次后,A才抢占到. 由于是重构项目,也无法通过回滚代码 ...