移动端页面弹出对话框效果Demo
2024-10-01 14:13:54
核心思路:设置一个隐藏的(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>
初始页面效果:
弹出对话框后的效果为:
查看效果和完整代码能够下载下面文件:
最新文章
- serviceStack.Redis 在PooledRedisClientManager 中设置密码
- 【URAL 1486】Equal Squares
- UVALive 6255 Kingdoms --状态搜索
- 视频处理控件TVideoGrabber部分技术问题解答
- approval workflow in sharepoint designer
- leetcode@ [279]Perfect Squares
- c#文件转化byte数组
- jquerymobile知识点:动态Grid的绑定以及刷新
- jQuery滑动并响应事件
- Angularjs 日期格式转换
- Server2008系统 FTP下载“当前的安全设置不允许”的解决方法
- jstl标签的fmt:formatDate格式化日期 String to Date
- Kibana5 数据探索使用(Discover功能)
- File Upload XSS
- binlog2sql实现MySQL误操作的恢复
- 一)surging 微服务框架使用系列之surging 的准备工作rabbitmq安装(转载 https://www.cnblogs.com/alangur/p/8339905.html)
- k64 datasheet学习笔记12---System Integration Module (SIM)
- django rest_framework 序列化组件详解
- day30 纸牌游戏
- struct 与 class 的区别