移动端页面弹出对话框效果Demo
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端页面弹出对话框效果Demo相关的知识，希望对你有一定的参考价值。
核心思路：设置一个隐藏的(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"); }; //点击"点我"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的主要内容，如果未能解决你的问题，请参考以下文章