1
我需要一個簡單的整個頁面彈出與CSS。 我正在使用來自CPA網絡的內容儲物櫃，它允許我在內容儲物櫃中使用自定義Css。 默認情況下彈出桌面內容鎖定器。但移動內容儲物櫃是靜態整頁，我只想移動內容儲物櫃彈出就像桌面更衣室。 我需要移動儲物櫃才能在整個頁面中彈出。移動內容儲物櫃彈出與CSS
桌面內容更衣室演示： Desktop Demo
移動Conent儲物櫃演示： Mobile Demo
桌面內容儲物櫃CSS：
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,300,200);
.lockerBackground {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
display: none;
z-index: 9999998;
}
.lockerPopup {
height: auto;
z-index: 9999999;
top: 50%;
left: 50%;
position: fixed;
}
.lockerPopup .header {
text-align: center;
font-weight: bold;
font-family: 'Source Sans Pro', sans-serif;
}
.lockerPopup .content {
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
}
.lockerPopup .footer {
font-family: 'Source Sans Pro', sans-serif;
text-align: center;
}
.lc-checks {
list-style: none;
margin: 0;
position: relative;
font-family: 'Source Sans Pro', sans-serif;
}
.lc-checks li {
position: relative;
cursor: hand;
text-align: center;
display: block;
}
/* Animation & Spinner */
.animated {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -2000px)
}
60% {
opacity: 1;
-webkit-transform: translateY(-50%, -53%)
}
80% {
-webkit-transform: translateY(-50%, -51%)
}
100% {
-webkit-transform: translate(-50%, -50%)
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
transform: translate(-50%, -2000px)
}
60% {
opacity: 1;
transform: translate(-50%, -53%)
}
80% {
transform: translate(-50%, -51%)
}
100% {
transform: translate(-50%, -50%)
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown
}
/* Small Screens */
@media only screen and (min-device-width: 560px) and (max-width:800px) {
.lockerPopup { width: 400px !important; }
.lockerPopup .content { font-size: 16px !important; }
.lockerPopup .header { font-size: 20pt; color: #315965; }
.lc-checks li { font-size: 10pt; padding: 15px; margin-left: 0 !important; }
}
/* Large Screens */
@media only screen and (min-width:800px) {
.lockerPopup .header { font-size: 26pt; }
.lockerPopup .content { font-size: 18px; }
.lc-checks { padding: 20px 0; }
.lc-checks li { padding: 15px 0; }
.lc-checks li { background-color: rgba(73, 128, 227, 0.59); }
}
/* You may change these styles */
.lockerPopup {
position: fixed;
height: auto;
width: 580px;
background-color: #fff;
padding: 15px;
border-radius: 5px;
z-index: 9999999;
box-shadow: 0 0 0 10px rgba(45, 208, 255, 0.25);
top: 50%;
left: 50%;
}
.lockerPopup .header {
padding: 0 0 10px;
border-bottom: 1px solid #C3C2C2;
color: #315965;
}
a { color: #475890; }
.lockerPopup .content {
padding: 20px 10px 0px 10px;
}
.lc-checks {
padding: 20px 0;
}
.lc-checks li {
margin-bottom: 10px;
font-weight: 800;
background-color: rgba(73, 128, 227, 0.59);
}
.lockerPopup .footer {
padding: 10px 0 0;
font-size: 14px;
border-top: 1px solid #C3C2C2;
padding: 15px 10px 5px 10px;
font-weight: 300;
}
.button {
background-color: #4980E3;
color: #f7fdf8;
border: 1px solid #006DE1;
font-size: 1.0em;
padding: 0.625rem 0;
text-align: center;
width: 100%;
transition: all 0.2s ease;
user-select: none;
position: relative;
top: 0;
cursor: pointer;
}
.lockerBackground {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
display: none;
z-index: 9999998;
}
.button:hover { background-color: #4980E3; color: white; }
.button:active { user-select: none; }
button:focus { outline: 0; }
/* Animation & Spinner */
.spinner-circle {
width: 14px;
height: 14px;
margin: -4px 0;
border: 2px solid #fff;
display: inline-block;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
position: relative
}
.spinner-circle:before {
content: '';
width: 0;
height: 0;
border-top: 14px solid rgba(73, 128, 227, .5);
border-right: 14px solid transparent;
position: absolute;
left: 6px;
top: 6px;
display: block
}
.spin {
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg)
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg)
}
}
移動內容儲物櫃CSS：
.ui-dialog .ui-dialog-title {
text-align: center;
width: 100%;
}
.ui-dialog .ui-dialog-buttonpane button {
margin-top: 10px;
width: 255px;
height: 50px;
}
.ui-widget-header {
border: none;
background: none;
}
.ui-dialog .ui-dialog-titlebar-close span {
display: none;
}
.ui-widget-overlay{
opacity: .60 !important; /* Make sure to change both of these, as IE only sees the second one */
filter: Alpha(Opacity=60) !important;
background-color: rgb(50, 50, 50) !important; /* This will make it darker */
}
如何讓我的手機內容儲物櫃像桌面儲物櫃一樣彈出。 我想要整頁移動彈出。我怎樣才能做到這一點與Css？ 你能幫我嗎，謝謝。
你也可以放置你的html內容嗎？ – Smit
對不起，我的網絡只允許使用Custom Css – Ashu