移动端页面弹出对话窗口效果Demo

共3个文件

js：1个

css：1个

html：1个

5星 · 超过95%的资源需积分: 32 379 下载量 30 浏览量 2015-07-24 15:28:18 上传评论收藏 31KB 7Z 举报

温馨提示

移动端页面弹出对话窗口效果Demo，此文件中包含了展示效果所需的html，css和jQuery库文件。下载后可以直接查看效果。

资源推荐

资源详情

资源评论

收起资源包目录

移动端页面弹出对话窗口效果Demo.7z （3个子文件）

移动端页面弹出对话窗口效果Demo

demo.html 2KB

demo.css 1KB

jquery-1.10.1.min.js 91KB

共 3 条

<!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>

评论收藏

内容反馈

资源评论