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 20 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
vue.js中created方法作用
Mar 30 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
基于js实现抽红包并分配代码实例
Sep 19 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
杏林同学录(四)
2006/10/09 PHP
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
php 301转向实现代码
2008/09/18 PHP
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
PHP Directory 函数的详解
2013/03/07 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
Python切片操作深入详解
2018/07/27 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
python实现桌面气泡提示功能
2019/07/29 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
python 实现客户端与服务端的通信
2020/12/23 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
大专生毕业的自我评价
2014/02/06 职场文书
安全宣传标语
2014/06/10 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js