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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jquery添加div实现消息聊天框
Feb 08 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代码把全角数字转为半角数字
2007/12/10 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
判断用户是否在线的代码
2011/03/05 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
python快速查找算法应用实例
2014/09/26 Python
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python开发的实用计算器完整实例
2017/05/10 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
Python 如何创建一个线程池
2020/07/28 Python
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
门诊挂号室室长岗位职责
2013/11/27 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
校长新学期致辞
2015/07/30 职场文书
Python anaconda安装库命令详解
2021/10/16 Python
Mysql中mvcc各场景理解应用
2022/08/05 MySQL