Skip to content

W
wechat_lung
Commit 91ef5795 by hanpeng
Options

-mark- 增加通用弹出提示框样式

parent 7242f89d
Showing with 811 additions and 0 deletions
wechat_Reset.css
......@@ -407,3 +407,814 @@ body {
background-color: rgba(0, 0, 0, .3);
display: none;
}
/*dialog*/
::-moz-focus-inner {
border-color: transparent;
}
.dialog {
position: fixed;
left: 0;
top: 0;
z-index: 10001;
width: 100%;
height: 100%;
}
.dialog-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 10002;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.dialog-content {
position: absolute;
top: 50%;
left: 50%;
z-index: 10003;
width: 90%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
line-height: 1.5;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 10px;
}
.dialog-content * {
box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
outline: none;
-moz-user-select: none;
-webkit-tap-highlight-color: transparent;
font-family: Helvetica;
font-size: 15px;
}
.dialog-btn,
.dialog-btn-hl {
position: relative;
display: inline-block;
height: 44px;
line-height: 44px;
color: #007aff;
font-size: 17px;
font-weight: 400;
cursor: pointer;
text-decoration: none;
background-color: transparent;
}
.dialog-btn:hover,
.dialog-btn:active,
.dialog-btn-hl:hover,
.dialog-btn-hl:active {
background-color: rgba(0, 0, 0, 0.05);
}
.dialog-content-hd {
position: relative;
padding: 20px 20px 10px;
margin-bottom: -25px;
text-align: center;
}
.dialog-content-hd .dialog-content-title {
font-size: 18px;
font-weight: 400;
color: #333;
}
.dialog-content-hd .dialog-btn-close {
display: block;
width: 26px;
height: 26px;
overflow: hidden;
position: absolute;
top: 18px;
right: 15px;
cursor: pointer;
background-color: transparent;
}
.dialog-content-hd .dialog-btn-close span {
display: none;
}
.dialog-content-hd .dialog-btn-close:before,
.dialog-content-hd .dialog-btn-close:after {
content: "";
display: block;
width: 18px;
height: 1px;
background-color: #808080;
position: absolute;
top: 13px;
right: 3px;
}
.dialog-content-hd .dialog-btn-close:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.dialog-content-hd .dialog-btn-close:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.dialog-content-bd {
margin: 25px 20px;
color: #333;
text-align: center;
font-family: PingFangSC;
font-weight: 600;
}
.dialog-content-bd p {
padding: 5px 0;
}
.content-scroll {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.dialog-content-ft {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
font-size: 0;
}
.dialog-content-ft:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid #d5d5d5;
color: #d5d5d5;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.dialog-content-ft .dialog-btn {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
}
.dialog-content-ft .dialog-btn:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 100%;
border-left: 1px solid #d5d5d5;
color: #d5d5d5;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
-ms-transform: scaleX(0.5);
transform: scaleX(0.5);
}
.dialog-content-ft .dialog-btn:first-child {
border-bottom-left-radius: 8px;
}
.dialog-content-ft .dialog-btn:first-child:after {
border-left: none;
}
.dialog-content-ft .dialog-btn:last-child {
border-bottom-right-radius: 8px;
}
.dialog-content-ft.stacked {
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
display: block;
}
.dialog-content-ft.stacked:after {
border: none;
}
.dialog-content-ft.stacked .dialog-btn {
position: relative;
display: block;
width: 100%;
}
.dialog-content-ft.stacked .dialog-btn:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid #d5d5d5;
color: #d5d5d5;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.dialog-open .dialog-content,
.dialog-open .dialog-overlay,
.dialog-close .dialog-content,
.dialog-close .dialog-overlay {
-webkit-animation-duration: 0.25s;
animation-duration: 0.25s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.dialog-open .dialog-content {
-webkit-animation-name: zoom-in;
animation-name: zoom-in;
}
.dialog-open .dialog-overlay {
-webkit-animation-name: fade-in;
animation-name: fade-in;
}
.dialog-close .dialog-content {
-webkit-animation-name: fade-out;
animation-name: fade-out;
}
.dialog-close .dialog-overlay {
-webkit-animation-name: fade-out;
animation-name: fade-out;
}
/**-------------------------
* android style
**------------------------*/
[data-style=android] .dialog-content {
box-sizing: content-box;
border-radius: 0;
background-color: white;
}
[data-style=android] .dialog-content-hd {
text-align: left;
padding: 20px 20px 0;
margin-bottom: -10px;
}
[data-style=android] .dialog-content-hd .dialog-btn-close {
top: 15px;
right: 15px;
}
[data-style=android] .dialog-content-bd {
margin: 25px 20px;
text-align: left;
}
[data-style=android] .dialog-content-ft {
display: block;
padding: 8px;
margin-top: -10px;
text-align: right;
}
[data-style=android] .dialog-content-ft:after {
border: none;
}
[data-style=android] .dialog-content-ft .dialog-btn {
display: inline-block;
min-width: 60px;
height: 36px;
line-height: 36px;
overflow: hidden;
padding: 0 13px;
font-size: 16px;
color: #808080;
text-align: center;
border-radius: 2px;
}
[data-style=android] .dialog-content-ft .dialog-btn:after {
border: none;
}
[data-style=android] .dialog-content-ft .dialog-btn-confirm,
[data-style=android] .dialog-content-ft .dialog-btn-hl {
color: #00bbd3;
}
[data-style=android] .dialog-content-ft.stacked .dialog-btn {
display: block;
text-align: right;
width: 100%;
}
[data-style=android] .dialog-content-ft-border:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid #d5d5d5;
color: #d5d5d5;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
transform: scaleY(0.5);
}
[data-style=android] .ripple {
border-radius: 99999px;
pointer-events: none;
position: absolute;
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
animation: ripple .75s ease-out;
-webkit-animation: ripple .75s ease-out;
}
@-webkit-keyframes ripple {
0% {
-webkit-transform: scale(0);
opacity: .5;
}
100% {
-webkit-transform: scale(2);
opacity: 0;
}
}
@keyframes ripple {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: .5;
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
[data-style=android].dialog-open .dialog-content {
-webkit-animation-name: bounce-in-down;
animation-name: bounce-in-down;
}
[data-style=android].dialog-open .dialog-overlay {
-webkit-animation-name: fade-in;
animation-name: fade-in;
}
[data-style=android].dialog-close .dialog-content {
-webkit-animation-name: bounce-out-up;
animation-name: bounce-out-up;
}
[data-style=android].dialog-close .dialog-overlay {
-webkit-animation-name: fade-out;
animation-name: fade-out;
}
/* toast */
.dialog-toast .dialog-overlay {
background-color: transparent;
}
.dialog-toast .dialog-content {
width: 148px;
height: 148px;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.8);
display: table;
}
.dialog-toast .dialog-content-bd {
margin: 0;
padding: 0;
font-size: 0;
position: relative;
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.dialog-toast .dialog-content-bd p {
margin: 0;
padding: 0;
}
.dialog-toast .info-icon {
width: 56px;
max-width: 56px;
}
.dialog-toast .info-text {
display: block;
width: 90%;
margin: 12px auto 0;
font-size: 16px;
color: #fff;
}
.dialog-toast.dialog-open .dialog-content,
.dialog-toast.dialog-open .dialog-overlay {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.dialog-toast.dialog-close .dialog-content,
.dialog-toast.dialog-close .dialog-overlay {
-webkit-animation-duration: 0.35s;
animation-duration: 0.35s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.dialog-toast.dialog-open .dialog-content {
-webkit-animation-name: fade-in;
animation-name: fade-in;
}
.dialog-toast.dialog-open .dialog-overlay {
-webkit-animation-name: fade-in;
animation-name: fade-in;
}
.dialog-toast.dialog-close .dialog-content {
-webkit-animation-name: fade-out;
animation-name: fade-out;
}
.dialog-toast.dialog-close .dialog-overlay {
-webkit-animation-name: fade-out;
animation-name: fade-out;
}
/* notice */
.dialog-notice .dialog-overlay {
background-color: transparent;
}
.dialog-notice .dialog-content {
display: table;
width: auto;
max-width: 85%;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.8);
}
.dialog-notice .dialog-content-bd {
margin: 0;
font-size: 0;
padding: 10px 15px;
line-height: normal;
}
.dialog-notice .info-icon {
width: 16px;
max-width: 16px;
margin: 0 2px;
vertical-align: middle;
position: relative;
top: -1px;
}
.dialog-notice .info-text {
margin: 0 2px;
font-size: 14px;
color: #fff;
line-height: 1.3;
vertical-align: middle;
}
.dialog-notice.dialog-open .dialog-content,
.dialog-notice.dialog-open .dialog-overlay {
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.dialog-notice.dialog-close .dialog-content,
.dialog-notice.dialog-close .dialog-overlay {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.dialog-notice.dialog-open .dialog-content {
-webkit-animation-name: fade-in;
animation-name: fade-in;
}
.dialog-notice.dialog-open .dialog-overlay {
-webkit-animation-name: fade-in;
animation-name: fade-in;
}
.dialog-notice.dialog-close .dialog-content {
-webkit-animation-name: fade-out;
animation-name: fade-out;
}
.dialog-notice.dialog-close .dialog-overlay {
-webkit-animation-name: fade-out;
animation-name: fade-out;
}
.dialog-notice-bottom .dialog-content {
top: auto;
bottom: 0;
-webkit-transform: translate(-50%, -20px);
-ms-transform: translate(-50%, -20px);
transform: translate(-50%, -20px);
}
.dialog-notice-bottom.dialog-open .dialog-content,
.dialog-notice-bottom.dialog-open .dialog-overlay,
.dialog-notice-bottom.dialog-close .dialog-content,
.dialog-notice-bottom.dialog-close .dialog-overlay {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.dialog-notice-bottom.dialog-open .dialog-content {
-webkit-animation-name: bounce-in-up;
animation-name: bounce-in-up;
}
.dialog-notice-bottom.dialog-close .dialog-content {
-webkit-animation-name: fade-out;
animation-name: fade-out;
}
/**-------------------------
* meida query
**------------------------*/
@media screen and (min-width: 1023px) {
.dialog-content {
max-width: 40%;
}
}
@media screen and (min-width: 767px) {
.dialog-content {
max-width: 60%;
}
}
/**-------------------------
* animate library
**------------------------*/
@-webkit-keyframes zoom-in {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(1.2, 1.2);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(1, 1);
}
}
@keyframes zoom-in {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(1.2, 1.2);
transform: translate(-50%, -50%) scale(1.2, 1.2);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(1, 1);
transform: translate(-50%, -50%) scale(1, 1);
}
}
@-webkit-keyframes zoom-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(0.8, 0.8);
}
}
@keyframes zoom-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(0.8, 0.8);
transform: translate(-50%, -50%) scale(0.8, 0.8);
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes bounce-in-down {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -75%);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%);
}
}
@keyframes bounce-in-down {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -75%);
transform: translate(-50%, -75%);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
@-webkit-keyframes bounce-out-up {
0% {
opacity: 1;
-webkit-transform: translate(-50%, -50%);
}
100% {
opacity: 0;
-webkit-transform: translate(-50%, -75%);
}
}
@keyframes bounce-out-up {
0% {
opacity: 1;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
100% {
opacity: 0;
-webkit-transform: translate(-50%, -75%);
transform: translate(-50%, -75%);
}
}
@-webkit-keyframes bounce-in-up {
0% {
opacity: 0;
-webkit-transform: translate(-50%, 0);
}
80% {
opacity: 1;
-webkit-transform: translate(-50%, -24px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -20px);
}
}
@keyframes bounce-in-up {
0% {
opacity: 0;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
80% {
opacity: 1;
-webkit-transform: translate(-50%, -24px);
transform: translate(-50%, -24px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -20px);
transform: translate(-50%, -20px);
}
}
@-webkit-keyframes bounce-out-down {
0% {
opacity: 1;
-webkit-transform: translate(-50%, -20px);
}
100% {
opacity: 0;
-webkit-transform: translate(-50%, 0);
}
}
@keyframes bounce-out-down {
0% {
opacity: 1;
-webkit-transform: translate(-50%, -20px);
transform: translate(-50%, -20px);
}
100% {
opacity: 0;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment