safari(css,jquery)仿iosNative的actionsheet

来源：互联网发布：java.io jar包下载编辑：程序博客网时间：2024/06/06 07:46

先上效果图
这里写图片描述
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);  }

0 0