移动端页面弹出对话框效果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的更多相关文章
- 移动端页面 弹出框滚动，底部body锁定，不滚动 / 微信网页禁止回弹效果
需求:页面有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动.加上滚动后,底部body的滚动事件如何禁止,加上了overflow:hidden;还是不可用. 如下图:地区弹出框可以滚动,而底部的b ...
- jQuery警告/确认/提示弹出对话框效果（替换传统JavaScript下的提示框）
http://www.51xuediannao.com/js/jquery/jquery_tsk/ http://www.jq22.com/demo/jqueryConfirm20160413/
- iframe子页面操作父页面并实现屏蔽页面弹出层效果
- UI设计， 弹出对话框 设计（区分强调按钮和普通按钮，给用户一个 正向建议的强调按钮）
在UI设计时,经常会需要 设计 弹出对话框,以下是个样式设计: 0.标准对话框 说明 Title space : 标题区 contents space : 内容区 function space: 功能 ...
- ASP.NET 弹出对话框和页面之间传递值的经验总结
今天碰到一个弹出对话框(PopUp dialog)的问题, 因该是个傻瓜问题, 但是还是让我研究了半天, 总结了一些前人经验, 拿出来跟大家分享一下! 在ASP.Net中页面之间的传值方法有很多,但是 ...
- Response.Write("<script>alert('弹出对话框！')</script>") 后跟Response.Redirect("page.aspx");不能弹出对话框，直接跳转页面了 如何解？
Response.Write和Response.Redirect一起用的时候就会这样,write脚本和redirect脚本不能同时使用,这样不会执行脚本,最好使用ClientScript 改进方法: ...
- Fancybox丰富的弹出层效果
Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...
- [转]jquery Fancybox丰富的弹出层效果
本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...
- jQuery学习笔记——弹出对话框
引用jQuery库文件的<script>标签,必须放在引用自定义脚本文件的<script>标签之前.否则,在编写的代码中将不能引用到jQuery框架 <script ty ...
随机推荐
- ASP.NET-dropdownlist默认值
可以在第三个选项中定义一个默认值,但是返回数据的时候就不需要这种类似"请选择名称"之类的提示了,所以在构造seleclt option的时候,要在option中的属性中加上sele ...
- HDU 4333 Contest 4
一开始就想到了扩展KMP,因为只有扩展KMP才是处理后缀的.但忽然短路以为扩展KMP求的是最长公共后缀,囧....又浪费了很多时间,都是对这个算法练得不多 再看那个扩展KMP算法之后,就很确定要的就是 ...
- [TS] Class Properties Public, Private and Read Only Modifiers
In the constructor, we want to set the prop to readonly, you need to do like this: class Superhero { ...
- 在MAC下怎样用SSH连接远程LINUXserver
首页,打开MAC的命令终端,检查是不是用root用的登录的,假设不是的话请输入命令:sudo -i切换到root. 然后,输入:ssh ip地址,假设主机存在的话会提示你输入password,输入正确 ...
- 《从零開始学Swift》学习笔记（Day5）——我所知道的标识符和keyword
Swift 2.0学习笔记(Day5)--我所知道的标识符和keyword 原创文章,欢迎转载.转载请注明:关东升的博客 好多计算机语言都有标识符和keyword,一直没有好好的总结,就是这 ...
- Android开发之使用Web Service进行网络编程
使用Web Service进行网络编程 Android应用通常都是执行在手机平台上.手机系统的硬件资源是有限的,无论是存储能力还是计算能力都有限.在Android系统上开发.执行一些单用户.小型应用是 ...
- doT.js的使用
引言 doT.js可以更好的在html端使用json数据. {{ }} for evaluation 模板标记符 {{= }} for interpolation 输出显示,默认变量名叫it {{! ...
- xBIM 高级01 IFC多模型合并
系列目录 [已更新最新开发文章,点击查看详细] 多模型合并可以实现以下功能: 覆盖多个模型以表现得像一个模型 统一访问数据,就像它是单个模型一样 只读.要修改模型的内容,您必须使用特定模型 不 ...
- 移动端video播放时不弹出页面层
移动端视频在播放时会主动弹出页面,有的浏览器不会.对那些会的浏览器进行处理: 直接加上下面三个属性即可,兼容方面就不说了,微信上是很ok的. <video x5-playsinline=&quo ...
- 线程进阶：多任务处理（17）——Java中的锁（Unsafe基础）
在网络层,互联网提供所有应用程序都要使用的两种类型的服务,尽管目前理解这些服务的细节并不重要,但在所有TCP/IP概述中,都不能忽略他们: 无连接分组交付服务(Connectionless Packe ...