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 相关文章推荐
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
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
Terran魔法科技
2020/03/14 星际争霸
PHP邮件专题
2006/10/09 PHP
详解PHP中的Traits
2015/07/29 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python读取Excel的方法实例分析
2015/07/11 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
C语言面试题
2015/10/30 面试题
国贸专业个人求职信分享
2013/12/04 职场文书
个人四风问题整改措施
2014/10/24 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
上课迟到检讨书
2015/05/06 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript