jquery 弹出框 使用popup

<!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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用jQuery原生可以很容易实现可拖拽放大缩小的弹出。首先,需要引入jQuery库,在HTML中创建弹出的结构,并设置好初始样式。然后使用jQuery的事件绑定方法,为弹出的标题栏添加鼠标按下事件,实现拖拽功能。接着,为弹出的放大缩小按钮添加点击事件,通过改变弹出的宽高和位置实现放大缩小效果。具体实现步骤如下: 1. 引入jQuery库: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 2. 创建弹出结构: ```html <div class="popup"> <div class="popup-title">弹出标题</div> <div class="popup-content"> <!-- 弹出内容 --> </div> <div class="popup-controls"> <button class="btn-zoom-in">放大</button> <button class="btn-zoom-out">缩小</button> </div> </div> ``` 3. 设置初始样式: ```css .popup { position: absolute; top: 50px; left: 50px; width: 200px; height: 150px; border: 1px solid #000; background-color: #fff; } .popup-title { cursor: move; } ``` 4. 实现拖拽功能: ```javascript $('.popup-title').on('mousedown', function(e) { var offsetX = e.clientX - $(this).offset().left; var offsetY = e.clientY - $(this).offset().top; $(document).on('mousemove', function(e) { $('.popup').offset({ top: e.clientY - offsetY, left: e.clientX - offsetX }); }); $(document).on('mouseup', function() { $(document).off('mousemove'); $(document).off('mouseup'); }); }); ``` 5. 实现放大缩小功能: ```javascript $('.btn-zoom-in').on('click', function() { var width = $('.popup').width(); var height = $('.popup').height(); $('.popup').css({ width: width * 1.2, height: height * 1.2 }); }); $('.btn-zoom-out').on('click', function() { var width = $('.popup').width(); var height = $('.popup').height(); $('.popup').css({ width: width * 0.8, height: height * 0.8 }); }); ``` 通过以上步骤,就可以实现一个带拖拽、放大和缩小功能的弹出。当用户鼠标点击弹出标题栏后,即可拖动整个弹出;点击放大缩小按钮后,即可实现弹出的放大和缩小效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值