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 插件学习(六)
Aug 06 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
JS forEach跳出循环2种实现方法
Jun 24 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
js中的string.format函数代码
2020/08/11 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
python3实现名片管理系统
2020/11/29 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
python实现同一局域网下传输图片
2020/03/20 Python
python实现人脸签到系统
2020/04/13 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
协议书模板
2014/04/23 职场文书
党员志愿者活动总结
2014/06/26 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
小学运动会报道稿
2015/07/22 职场文书
建房合同协议书
2016/03/21 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL