モバイル、Android、iPhone でこの HTML スクリプトを動作させるには、助けが必要です。これは、Opera、Safari、Mozilla、および Chrome で非常にうまく機能しています。
以下に、チェックボックストグルベースのボックスを表示するコンテンツを示します
ありがとう
HTML コンテンツ:
<input type="checkbox" id="popup_s" class="popUpControl_s">
<label for="popup_s" style="display:block">
<div id="selector_s">Click Me</div>
<span class="boxtoggle_s">
<div id="content">Lorem ipsum content</div>
<div id="close_s"><img src="/media/close.png" alt="Close"></div>
</span>
</label>
CSS3 コンテンツ
.boxtoggle_s {
position: absolute;
left: 350px;
top: 33%;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999));
background-image: -webkit-linear-gradient(top, #eeeeee, #999999);
background-image: -moz-linear-gradient(top, #eeeeee, #999999);
background-image: -ms-linear-gradient(top, #eeeeee, #999999);
background-image: -o-linear-gradient(top, #eeeeee, #999999);
/* Prevent some white flashing in Safari 5.1 */
-webkit-backface-visibility: hidden;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
width: 230px;
padding: 20px;
opacity: 0;
-webkit-transform: scale(0) skew(50deg);
-moz-transform: scale(0) skew(50deg);
-ms-transform: scale(0) skew(50deg);
-o-transform: scale(0) skew(50deg);
-webkit-transform-origin: 0px -30px;
-moz-transform-origin: 0px -30px;
-ms-transform-origin: 0px -30px;
-o-transform-origin: 0px -30px;
-webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
-moz-transition: -moz-transform ease-out .35s, opacity ease-out .4s;
-ms-transition: -ms-transform ease-out .35s, opacity ease-out .4s;
-o-transition: -o-transform ease-out .35s, opacity ease-out .4s;
}
.boxtoggle_s:after {
content: "";
position: absolute;
bottom: 100%;
left: 25px;
border-bottom: 20px solid #eee;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
width: 0;
height: 0;
}
.popUpControl_s {
display: none;
}
.popUpControl_s:checked ~ label > .boxtoggle_s {
opacity: 1;
-webkit-transform: scale(1) skew(0deg);
-moz-transform: scale(1) skew(0deg);
-ms-transform: scale(1) skew(0deg);
-o-transform: scale(1) skew(0deg);
}
#selector_s {
position:absolute;
top:212px;
right:250px;
margin:5px 0 0 10px;
padding: 8px 5px 5px 10px;
width: 140px;
height:22px;
background:#ddd;
cursor:pointer;
}
#content {
color:#000;
font-weight:bold;
font-size:12px;
}
#close_s {position:absolute;left:242px; top:35px;}