AspNet中使用JQuery boxy插件的确认框


Posted in Javascript onMay 20, 2015

JQuery有不少弹出框的插件,boxy应该算的上是功能和效果都还不错的一款了。先来看一张效果图吧。

AspNet中使用JQuery boxy插件的确认框

在Web开发中经常会使用到Alert和Confirm弹出框,在Asp.Net中的删除按钮上我们常常会加上删除的确认提示,以避免误删除数据,就像上面图片那样。我们一般会写出这样的代码。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title></title>
   <script type="text/javascript">
     function confirmDel() {
       return confirm("您确认要删除吗?");
     }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <asp:Button ID="btnDel" runat="server" 
OnClientClick="return confirmDel();" Text="删除" />
  </form>
</body>
</html>

上面的代码很简单,confirm弹出框会有两个按钮,点击确定返回true,点击取消返回false。在boxy插件中也有confirm方法,调用代码如下:

$(document).ready(function() {
  $("#btnDel").click(function() {
    Boxy.confirm("您确认要删除吗?", function() { }, null);
    return false;
  });

});

Boxy的confirm方法有三个参数分别是确认信息内容,弹出框点击确定的回调函数,一些设置项比如标题。上面的代码中如果不加上return false,那么弹出框会闪现,然后删除按钮的后天事件还是执行了。加上return false,那么不管是点击确定还是取消都不会执行后台事件,这显然达不到我们的要求,看来只能打点击确定后的回调函数的主意了。可以在一个公用的js文件中将Boxy的confirm封装一下:

AspNet中使用JQuery boxy插件的确认框

页面的调用代码如下:

$(document).ready(function() {
  $("#Button1").click(function() { return confirmO(this, "您确认删除吗?") });

});

经过这样修改后,但点击弹出框的确定按钮时就会执行服务器事件了。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 #Javascript
JS中的Replace方法使用经验分享
May 20 #Javascript
jquery使用经验小结
May 20 #Javascript
js实现字符串转日期格式的方法
May 20 #Javascript
JavaScript实现带标题的图片轮播特效
May 20 #Javascript
手机端页面rem宽度自适应脚本
May 20 #Javascript
jquery实现弹出层效果实例
May 19 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
浅析Vue中method与computed的区别
2018/03/06 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
应聘医药代表职位求职信
2013/10/21 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
党员十八大心得体会
2014/09/12 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
期中考试后的感想
2015/08/07 职场文书
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
MySQL添加索引特点及优化问题
2022/07/23 MySQL
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL