y***@qq.com
y***@qq.com
  • 发布:2017-07-14 10:27
  • 更新:2017-07-14 11:00
  • 阅读:5819

怎么修改mui的confirm的样式

分类:MUI

怎么修改mui的confirm的样式,例如 确认和取消的背景颜色变化,字体变化

2017-07-14 10:27 负责人:无 分享
已邀请:
LLgg

LLgg

mui.min.css弹出窗的css代码,在mui.min.css文件里面的与“popup“”相关的类样式,
你可以使用css美化代码先把原本压缩的css美化一下,然后用搜索功能,查询“popup”,出来的就是与弹出窗相关的css样式代码,然后你就可以自己根据自己的需求来修改。

如果不知道弹出框的下面的div等元素具体引用了那些类样式名,
你可以使用谷歌浏览器先打开这一个弹出框的页面,然后按F12键,就出来了调试模式,然后你把鼠标放到对应的div元素上面,右边就会出来相关的信息

下面是为查询到的与弹出框相关的css样式

.mui-popup-backdrop {  
    position: fixed;  
    z-index: 998;  
    top: 0;  
    right: 0;  
    bottom: 0;  
    left: 0;  
    -webkit-transition-duration: 400ms;  
    transition-duration: 400ms;  
    opacity: 0;  
    background: rgba(0,0,0,.4)  
}  

.mui-popup-backdrop.mui-active {  
    opacity: 1  
}  

.mui-popup {  
    position: fixed;  
    z-index: 10000;  
    top: 50%;  
    left: 50%;  
    display: none;  
    overflow: hidden;  
    width: 270px;  
    -webkit-transition-property: -webkit-transform,opacity;  
    transition-property: transform,opacity;  
    -webkit-transform: translate3d(-50%,-50%,0) scale(1.185);  
    transform: translate3d(-50%,-50%,0) scale(1.185);  
    text-align: center;  
    opacity: 0;  
    color: #000;  
    border-radius: 13px  
}  

.mui-popup.mui-popup-in {  
    display: block;  
    -webkit-transition-duration: 400ms;  
    transition-duration: 400ms;  
    -webkit-transform: translate3d(-50%,-50%,0) scale(1);  
    transform: translate3d(-50%,-50%,0) scale(1);  
    opacity: 1  
}  

.mui-popup.mui-popup-out {  
    -webkit-transition-duration: 400ms;  
    transition-duration: 400ms;  
    -webkit-transform: translate3d(-50%,-50%,0) scale(1);  
    transform: translate3d(-50%,-50%,0) scale(1);  
    opacity: 0  
}  

.mui-popup-inner {  
    position: relative;  
    padding: 15px;  
    border-radius: 13px 13px 0 0;  
    background: rgba(255,255,255,.95)  
}  

.mui-popup-inner:after {  
    position: absolute;  
    z-index: 15;  
    top: auto;  
    right: auto;  
    bottom: 0;  
    left: 0;  
    display: block;  
    width: 100%;  
    height: 1px;  
    content: '';  
    -webkit-transform: scaleY(.5);  
    transform: scaleY(.5);  
    -webkit-transform-origin: 50% 100%;  
    transform-origin: 50% 100%;  
    background-color: rgba(0,0,0,.2)  
}  

.mui-popup-title {  
    font-size: 18px;  
    font-weight: 500;  
    text-align: center  
}  

.mui-popup-title+.mui-popup-text {  
    font-family: inherit;  
    font-size: 14px;  
    margin: 5px 0 0  
}  

.mui-popup-buttons {  
    position: relative;  
    display: -webkit-box;  
    display: -webkit-flex;  
    display: flex;  
    height: 44px;  
    -webkit-box-pack: center;  
    -webkit-justify-content: center;  
    justify-content: center  
}  

.mui-popup-button {  
    font-size: 17px;  
    line-height: 44px;  
    position: relative;  
    display: block;  
    overflow: hidden;  
    box-sizing: border-box;  
    width: 100%;  
    height: 44px;  
    padding: 0 5px;  
    cursor: pointer;  
    text-align: center;  
    white-space: nowrap;  
    text-overflow: ellipsis;  
    color: #007aff;  
    background: rgba(255,255,255,.95);  
    -webkit-box-flex: 1  
}  

.mui-popup-button:after {  
    position: absolute;  
    z-index: 15;  
    top: 0;  
    right: 0;  
    bottom: auto;  
    left: auto;  
    display: block;  
    width: 1px;  
    height: 100%;  
    content: '';  
    -webkit-transform: scaleX(.5);  
    transform: scaleX(.5);  
    -webkit-transform-origin: 100% 50%;  
    transform-origin: 100% 50%;  
    background-color: rgba(0,0,0,.2)  
}  

.mui-popup-button:first-child {  
    border-radius: 0 0 0 13px  
}  

.mui-popup-button:first-child:last-child {  
    border-radius: 0 0 13px 13px  
}  

.mui-popup-button:last-child {  
    border-radius: 0 0 13px  
}  

.mui-popup-button:last-child:after {  
    display: none  
}  

.mui-popup-button.mui-popup-button-bold {  
    font-weight: 600  
}  

.mui-popup-input input {  
    font-size: 14px;  
    width: 100%;  
    height: 26px;  
    margin: 15px 0 0;  
    padding: 0 5px;  
    border: 1px solid rgba(0,0,0,.3);  
    border-radius: 0;  
    background: #fff  
}  

.mui-plus.mui-android .mui-popup-backdrop {  
    -webkit-transition-duration: 1ms;  
    transition-duration: 1ms  
}  

.mui-plus.mui-android .mui-popup {  
    -webkit-transition-duration: 1ms;  
    transition-duration: 1ms;  
    -webkit-transform: translate3d(-50%,-50%,0) scale(1);  
    transform: translate3d(-50%,-50%,0) scale(1)  
}

这是我的网站,O(∩_∩)O谢谢支持----->>中旋网ZxlmWeb

  • y***@qq.com (作者)

    为什么我改了mui.css 的样式 真机联调不起作用

    2017-07-14 15:11

  • LLgg

    回复 y***@qq.com:mui.min.css,不是mui.css

    2017-07-14 15:13

  • y***@qq.com (作者)

    回复 LLgg:我改的就是我html中引用的mui.min.css

    2017-07-14 15:20

  • y***@qq.com (作者)

    回复 LLgg:但是不起作用

    2017-07-14 15:21

  • LLgg

    你的弹窗不是官方的原有的弹窗,如果你的弹窗页面的代码是直接复制别人的,你看一下别人有没有新添加新的样式,然后找到指定的样式再去修改

    2017-07-14 15:52

该问题目前已经被锁定, 无法添加新回复