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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery实现日历效果
Sep 11 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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
apache rewrite_module模块使用教程
2008/01/10 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
js获取域名的方法
2015/01/27 Javascript
javascript正则表达式总结
2016/02/29 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python上selenium的弹框操作实现
2020/07/13 Python
python3判断IP地址的方法
2021/03/04 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
HEMA英国:荷兰原创设计
2018/08/28 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
小学语文课后反思精选
2014/04/25 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
单位更名证明
2015/06/18 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android