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判断用户浏览器插件安装情况的代码
Jan 01 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
js post提交调用方法
Feb 12 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
vue小白入门教程
Apr 02 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 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 字符串操作入门教程
2006/12/06 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
安装dbus-python的简要教程
2015/05/05 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
如何利用python查找电脑文件
2018/04/27 Python
python爬取个性签名的方法
2018/06/17 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
使用TensorFlow实现SVM
2018/09/06 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
python贪吃蛇游戏代码
2020/04/18 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
使用python实现名片管理系统
2020/06/18 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
navabi英国:设计师大码女装
2019/06/25 全球购物
个人债务授权委托书
2014/10/17 职场文书