PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HBuilderX教程 > 正文

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

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:使用了mui.toast来实现可自动消失的信息提示效果。但默认的显示效果太差了,很不显示,而且是在底部的。如下图:想改到屏幕的中间位置,再...
    使用了mui.toast来实现可自动消失的信息提示效果。

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

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

     

    想改到屏幕的中间位置,再改大一点。
    但官方并没有相关的文档教程,论坛也没找到相关的教程。
    只好自己研究,最终发现。
    消息框的DIV类为

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

    所以,就可以通过修改CSS来改变了。
    我改后的最终效果如下:

     

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

     

    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;}
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-146-5546-1.html
    相关热词搜索: