移动端页面弹出对话框效果Demo
来源:互联网 发布:淘宝假冒伪劣产品投诉 编辑:程序博客网 时间:2024/06/01 20:26
核心思路:设置一个隐藏的(display:none;)、背景偏暗的div及其子div作为对话框,当点击某处时,将此div设置为显示。
核心代码如下(部分js代码用于动态调整div内容的行高,这部分代码可以忽略):
<!doctype html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="demo.css"> <script src="jquery-1.10.1.min.js"></script> <script> function getHeight(className) { var height = $(className).height(); return height; } function setLineHeight(className) { var height = getHeight(className) + "px"; $(className).css("line-height",height); } $(function() { //调整行高并设置回调函数,窗口一动我也动 setLineHeight(".init-page-btn"); setLineHeight(".hidden-alert"); window.onresize = function(){ setLineHeight(".init-page-btn"); setLineHeight(".hidden-alert"); }; //点击"点我"按钮就弹出窗口让我填写手机号码 $(".init-page-btn").click(function(){ $(".hidden-bg").show(); setLineHeight(".hidden-alert"); }); //点击弹出窗口中的"叉",弹出窗口就消失 $(".hidden-alert-close").click(function(){ $(".hidden-bg").hide(); }); }); </script> </head> <body> <div class="init-page"> <div class="init-page-btn">点我</div> </div> <div class="hidden-bg"> <div class="hidden-alert"> <span>请输入手机号:<input type="text"></span> <div class="hidden-alert-close">叉</div> </div> </div> </body></html>
初始页面效果:
弹出对话框后的效果为:
查看效果和完整代码可以下载以下文件:
点击打开链接
0 0
- 移动端页面弹出对话框效果Demo
- Flex弹出对话框demo
- [H5]移动端页面Demo
- 弹出对话框,页面跳转
- HTML弹出对话框页面
- 移动端弹出软键盘页面变形
- EasyUI效果--弹出页面效果
- ios 自定义弹出对话框效果
- JS弹出可移动的DIV对话框透明遮罩效果
- 在当前页面弹出对话框
- asp.net页面弹出对话框
- 弹出对话框并跳转页面
- ajax页面无法弹出对话框??
- 弹出对话框页面不变形
- 不刷新页面弹出对话框
- HTML5+原生javascript移动端滑动banner效果demo
- Android 启动页面弹出效果
- 移动端弹出层上禁止页面滚动
- centos6.6 安装git 2.0
- 题目1437:To Fill or Not to Fill(贪心算法)
- IDE: 将程序加入右键菜单:
- [MFC]绘制文本、CFont类
- linux之sort用法
- 移动端页面弹出对话框效果Demo
- 九度oj 1101
- 从付费产品说起
- IOS学习之蓝牙4.0
- Android403Forbidden的几种可能错误
- Mongodb操作
- Hadoop实现Clustering by fast search and find of density peaks (2)
- Java程序员应该知道的10个面向对象理论
- 用CocoaPods做iOS程序的依赖管理-from 唐巧