移动端页面弹出对话框效果Demo
2017-06-08 11:46
399 查看
核心思路:设置一个隐藏的(display:none;)、背景偏暗的div及其子div作为对话框。当点击某处时,将此div设置为显示。
核心代码例如以下(部分js代码用于动态调整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"); }; //点击"点我"button就弹出窗体让我填写手机号码 $(".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>
初始页面效果:
弹出对话框后的效果为:
查看效果和完整代码能够下载下面文件:
点击打开链接
相关文章推荐
- 移动端页面弹出对话框效果Demo
- window.confirm()方法,效果是在页面上弹出对话框
- 移动端页面 弹出框滚动,底部body锁定,不滚动 / 微信网页禁止回弹效果
- ASP.NET 弹出对话框和页面之间传递值的经验总结
- 弹出对话框的同时保持页面的显示(不变形)
- MagicAjax 弹出对话框,并跳转页面
- 弹出对话框的同时保持页面的显示
- WEB页面点图或按钮后弹出另存对话框
- 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)
- 转向新页面前,弹出对话框,点OK后,才转到新页面
- 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)
- 实现弹出"提示对话框"之后再进行"页面的转向"
- [Javascript]如何将弹出的页面形成置顶的效果?
- 弹出对话框的同时保持页面的显示
- 弹出对话框的同时保持页面的显示
- 一个弹出页面的徐徐升起的js效果
- 弹出对话框的同时保持页面的显示
- 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)
- 删除时在页面弹出对话框(.net)
- Jsp页面弹出输入对话框的实现