好资源导航 » 文章资讯 » jquery实现点击弹出对话框

jquery实现点击弹出对话框

2023-08-01 22:54:08 64

本文实例为大家分享了jquery实现点击弹出对话框的具体代码，供大家参考，具体内容如下

1.html里面隐藏好一个div




删除时提示

你真的要删除所有分区吗？

2.css样式里面增加一个弹出对话框的样式

.dialog{width:360px;border:1px#666solid;position:absolute;display:none;z-index:101;}
.dialog.title{background:#333;padding:10px;color:#fff;font-weight:bold;}
.dialog.titleimg{float:right;}
.dialog.content{background:#fff;padding:25px;height:60px;}
.dialog.contentimg{float:left;}
.dialog.contentspan{float:left;padding:10px;}
.dialog.bottom{text-align:right;padding:10px10px10px0px;background:#eee;}
.dialog.btn{border:#6661pxsolid;width:65px;}

3.js里面监控点击弹框和弹框后的确定和取消动作

$(".delallpart").on("click",function(){
$.ajax({
url:"/osd/opt/delallpart",
type:"POST",
datatype:'json',
data:{"action":"del_all","del_mount":"2"},
beforeSend:function(xhr,settings){
xhr.setRequestHeader("X-CSRFToken",getCookie2('csrftoken'));
},
success:function(arg){
vardiv=$("#delallpartdialog");
div.css("display","block");
div.css("left",500).css("top",500);
}
});
});
$(".dialog").on("click",".btnnoOk",function(){
alert("notok");
$(this).parents(".dialog").css("display","none");
});

$("#delallpartdialog").on("click",".btnok",function(){
alert("ok!");
});

4.效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

jquery实现点击弹出对话框

热门推荐

随机推荐