怎么修改mui的confirm的样式,例如 确认和取消的背景颜色变化,字体变化
![y***@qq.com](https://img-cdn-tc.dcloud.net.cn/account/identicon/d8e5b94432126373b8bdc0cdbe30b424.png)
y***@qq.com
- 发布:2017-07-14 10:27
- 更新:2017-07-14 11:00
- 阅读:5819
怎么修改mui的confirm的样式
分类:MUI
![LLgg](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/13/38/88_avatar_mid.jpg?v=0)
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