jquery 弹出框使用popup

最新推荐文章于 2024-05-20 10:05:52 发布

zhaossdut

最新推荐文章于 2024-05-20 10:05:52 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhaossdut/article/details/38369745

本文介绍了一种利用HTML、CSS及jQuery来实现响应式弹出窗口的方法。通过设置不同元素的高度并使用JavaScript函数控制显示与隐藏效果，使得网页具备良好的用户体验。此外还涉及了如何根据不同屏幕尺寸调整布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>block</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-self.js"></script>//jquery中popup的js文件
<script src="js/jquery.mobile-1.2.0.js"></script>
<script>
$(document).ready(function(){
var a=document.documentElement.clientHeight;
$("#bg_pop").height(a);
$(".main").height(a);
$("#title").height(a*0.04);
$(".m1").height(auto);
$("#meng").height(a*0.4);
$(".txt").height(a*0.06);
$("#note").height(a*0.08);
$("#foot").height(a*0.1);
$("#simplepopup").popup("");
});
</script>
<script>
function s1(){
document.getElementById("bg_pop").style.display="block";
$("#simplepopup").popup("popup");
}
function can(){
document.getElementById("bg_pop").style.display="none";
$("#simplepopup").popup("close");
}
function s3(){
document.getElementById("bg_pop").style.display="none";
}
</script>
<style>
#bg_pop {
position: absolute;
top: 0;
left: 0;
background:#000000;
filter: alpha(opacity=60);
opacity: 0.6;
z-index:0;
width:100%;

}
.main{
width:100%;
float:left;
}
#title{
text-align:center;
}
.txt{
margin-left:8%;
width:90%;
border:#66CCFF 1px solid;
border-radius:8px;
}
#note{
border:#66CCFF 1px solid;
border-radius:8px;
}
</style>
</head>
<body>
<div data-role="content" class="main">
<div id="bg_pop" style="display:none;" onClick="s3();"></div>
<a href="#simplepopup" data-rel="popup" onClick="s1();"> Open Popup</a>
<div data-role="popup" id="simplepopup" style=" width:90%;margin-left:20%; display:block;">
<div id="meng" style="width:90%; margin-left:5%;">
<div id="title">请填写如下信息</div>
<div id="body">
<input type="text" class="txt" placeholder="联系人*";/>
<input type="text" class="txt" />
<input type="text" class="txt" placeholder="就餐人数（默认2人）*" />
<input type="text" id="note" placeholder="备注" />
</div>
<div id="foot">
<input type="submit" value="提交订单" />
<input type="submit" value="取消提交" onClick="can();" />
</div>
</div>
</div>

</div>
</body>
</html>