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 28 Javascript
再谈javascript原型继承
Nov 10 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
详解Javascript实践中的命令模式
May 05 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
DSP接收机前端设想
2021/03/02 无线电
用PHP和ACCESS写聊天室(五)
2006/10/09 PHP
php 显示指定路径下的图片
2009/10/29 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
php HTML无刷新提交表单
2016/04/05 PHP
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
js动态引入的四种方法
2018/05/05 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
python基础教程之常用运算符
2014/08/29 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
django中间键重定向实例方法
2019/11/10 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
爱情检讨书大全
2014/01/21 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
小学教师见习总结
2015/06/23 职场文书
《搭石》教学反思
2016/02/18 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
解析MySQL索引的作用
2022/03/03 MySQL
MySQL查询日期时间
2022/05/15 MySQL