mui.toast样式风格及位置修改教程

使用了mui.toast来实现可自动消失的信息提示效果。

但默认的显示效果太差了,很不显示,而且是在底部的。

如下图:

想改到屏幕的中间位置,再改大一点。

但官方并没有相关的文档教程,论坛也没找到相关的教程。

只好自己研究,最终发现。

消息框的DIV类为

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

</div>
</div>

所以,就可以通过修改CSS来改变了。

我改后的最终效果如下:

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;}

参考页http://ask.dcloud.net.cn/question/17487

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值