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 相关文章推荐
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
js微信分享接口调用详解
Jul 23 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
Node登录权限验证token验证实现的方法示例
May 25 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 命令行参数详解及应用
2011/05/18 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python 多线程应用介绍
2012/12/19 Python
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
10个Python小技巧你值得拥有
2018/09/29 Python
python图像处理入门(一)
2019/04/04 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
Django的性能优化实现解析
2019/07/30 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
催款律师函范文
2015/05/27 职场文书
技能培训通讯稿
2015/07/18 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫