1

我需要一些帮助才能在移动设备、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;}​
4

0 回答 0