您的位置:首页 > Web前端 > JQuery

safari(css,jquery)仿iosNative的actionsheet

2016-05-15 23:06 639 查看
先上效果图



html代码:

<div id="actionsheet" class="actionsheet hidden">
<div class="actionchoices">
<div class="fieldset">
<div>工作时间:每天9:00-22:00</div>
<a href="tel:4006892227" class="caution">呼叫 400-689-2227</a>
</div>
<a href="javascript:void(0);" ng-click="hideActionSheet()" class="redButton dismiss">取消</a>
</div>
</div>


css代码:

.actionsheet{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom:0;
background: #333;
opacity: 0.85;
z-index: 1001;
}
.actionchoices{
z-index: 1002;
border-radius: 2%;
position: fixed;
width: 100%;
bottom: -50%;
left: 50%;
margin-left: -50%;
}
div.fieldset div{
display: block;
font-weight: normal;
margin: 0 8px 0 8px;
text-align: center;
text-decoration: inherit;
background-image: none;
background-color: rgba(255, 255, 255, 0.95);
color: #777;
text-shadow: none;
font-size: 1em;
line-height: 1.7em;
padding: 15px 15px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 1px solid #e6e6e6;
}
div.fieldset a{
border-radius: 0;
margin: 0 8px 0 8px;
font-size: 20px;
color: #007aff;
line-height: 44px;
border: 0 solid transparent;
border-bottom: 1px solid #e6e6e6;
background-color: rgba(255,255,255,.95);
font-weight: 400;
padding: 0;
text-shadow: none;
display: block;
text-align: center;
text-decoration: inherit;
-webkit-tap-highlight-color: transparent;
-webkit-user-drag: none;
cursor: auto;
}
div.fieldset a.caution{
color: #fd472a;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
div.fieldset+a{
margin-bottom: 0;
border: none;
background-color: #f4f4f4;
color: #007aff;
margin: 8px 8px 0 8px;
border-radius: 4px;
font-size: 20px;
line-height: 44px;
padding: 0;
text-shadow: none;
display: block;
text-align: center;
text-decoration: inherit;
-webkit-tap-highlight-color: transparent;
-webkit-user-drag: none;
}


jquery控制显示(用了angularjs)

$scope.showActionSheet = function(){
$('#actionsheet').removeClass('hidden');
setTimeout(function(){
console.log('show');
$('#actionsheet .actionchoices').animate({bottom:"2%"},'fast');
},100);
}
$scope.hideActionSheet = function(){
$('#actionsheet .actionchoices').animate({bottom:"-50%"},'fast');
setTimeout(function(){
$('#actionsheet').addClass('hidden');
},100);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: