jquery实现点击弹出对话框


Posted in jQuery onFebruary 08, 2020

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

1.html里面隐藏好一个div

<div class="dialog" id="delallpartdialog">
 <div class="title">
  <img alt="点击可以关闭" src="/static/images/disk.png" width="30px" height="30px;">
  删除时提示
 </div>
 <div class="content">
  <img alt="" src="delete.gif" width="60px" height="60px">
  <span>你真的要删除所有分区吗?</span>
 </div>
 <div class="bottom">
  <input type="button" value="确定" class="btnok">
  <input type="button" value="取消" class="btnnoOk">
 </div>
</div>

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

.dialog{width:360px;border:1px #666 solid;position:absolute;display:none;z-index:101;}
.dialog .title {background: #333;padding:10px; color: #fff; font-weight: bold; }
.dialog .title img {float: right;}
.dialog .content {background: #fff;padding:25px;height: 60px;}
.dialog .content img {float: left;}
.dialog .content span {float: left;padding:10px;}
.dialog .bottom {text-align: right;padding:10px 10px 10px 0px;background: #eee;}
.dialog .btn {border: #666 1px solid;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) {
   var div = $("#delallpartdialog");
   div.css("display", "block");
   div.css("left", 500).css("top", 500);
  }
 });
});
$(".dialog").on("click",".btnnoOk", function () {
 alert("not ok");
 $(this).parents(".dialog").css("display", "none");
});
 
$("#delallpartdialog").on("click",".btnok", function () {
 alert("ok!");
});

4.效果图

jquery实现点击弹出对话框

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jquery中each循环的简单回滚操作
May 05 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实现简易聊天框
Feb 08 #jQuery
jquery添加div实现消息聊天框
Feb 08 #jQuery
jQuery实现聊天对话框
Feb 08 #jQuery
jquery实现聊天机器人
Feb 08 #jQuery
jQuery实现获取多选框的值示例
Feb 07 #jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 #jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 #jQuery
You might like
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
js显示动态时间的方法详解
2016/08/20 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Python笔试面试题小结
2019/09/07 Python
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
授权委托书(法人单位用)
2014/09/29 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
未婚证明范本
2015/06/15 职场文书
学生检讨书范文
2019/06/24 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang