safari(css,jquery)仿iosNative的actionsheet
2016-05-15 23:06
639 查看
先上效果图
html代码:
css代码:
jquery控制显示(用了angularjs)
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); }
相关文章推荐
- 一周乱弹(1,jQuery vilidate验证表单隐藏域2,nivoSlider调整图片大小)
- jQuery常用方法
- jquery 调用数据
- jquery源码学习之 设计结构
- js,jquery,不能通过true/false控制radio的选中状态,prop,attr,
- jQuery学习笔记
- jQuery学习笔记
- day14 jQuery
- 解决跨域的方法
- jQuery与AJAX----jQuery中ajax接口
- jquery-uploadfile的使用(多文件异步上传)
- 基于jquery实现ajax无刷新评论
- jquery的延迟加载插件Lazy Load Plugin for jQuery
- 复习练习(03)jquery Css方法一步步升级
- Jquery全选反选
- 自定义jQuery插件实现分页
- Jquery 复习练习(02)Javascript 与jquery 互转 onclick 与click区别
- 如何实现鼠标悬停图片放大的效果。
- jquery中:input和input的区别
- jquery动画切换引擎插件 Velocity.js 学习01