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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
一个JS翻页效果
2007/07/23 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
python实现微信自动回复功能
2018/04/11 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python远程连接MySQL数据库
2019/04/19 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
keras中的History对象用法
2020/06/19 Python
护理专科毕业生自荐书范文
2014/02/19 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
Python数据结构之队列详解
2022/03/21 Python