jquery实现一个简单的action-sheet手机端底部弹出选择框效果代码
代码语言:html
所属分类:弹出层
代码描述:jquery实现一个简单的action-sheet手机端底部弹出选择框效果代码
代码标签: 简单 的 action-sheet 手机 端 底部 弹出 选择 框 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script> <style> ul {} body { font-size: 14px; padding: 0; margin: 0; } .mask { position: absolute; top: 0; display: none; height: 200rem; background: rgba(0,0,0,0.4); z-index: 9999; width: 100%; } .close-icon { font-weight: 700; height: 0.6rem; line-height: 0.6rem; width: 1rem; text-align: center; } .action-sheet { border-top-left-radius: 0.6rem; border-top-right-radius: 0.6rem; display: none; background: #fff; width: 100%; position: fixed; bottom: 0; z-index: 11111; } .menu-name { border-left: 6px solid #FFD700; height: 0.5rem; text-indent: 0.2rem; line-height: 0.5rem; font-weight: 700; color: #0B308D; } .action-sheet ul li { margin: 0.5rem 0.4rem; color: #333; font-weight: 700; list-style: none; height: 1.2rem; text-align: center; line-height: 1.2rem; border-top: 1px solid #eee; } .menu-title { display: flex; align-items: center; height: 1.8rem; margin: 0 0.4rem; justify-content: space-between; line-height: 1.8rem; background: #fff; border-top-left-radius: 0.6rem; border-top-right-radius: 0.6rem; } .scroll-mask { height: 100%; overflow: scroll; overflow-y: hidden; } </style> </head> <body> <button style="width: 100%;"> 点击 </button> <div class="action-sheet&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0