关于使用 jBox 对话框的提交不能弹出问题解决方法


Posted in Javascript onNovember 07, 2012

jBox 是个不错的对话框组件。
在 ASP.NET Form 中使用 jBox 的时候,在按钮注册的客户端点击事件中,会发现不能弹出对话框问题。
表现为页面一闪就提交了,导致对话框一闪而过,甚至根本看不到。导致模式对话框失败。
首先,按钮会有默认处理,对于普通的 ASP.NET 按钮来说,会导致表单的提交,提交表单导致了页面的刷新。所以,为了不提交表单,就需要阻止按钮默认的行为,这可以通过下面的代码实现。

function stopDefault( e ) { 
// Prevent the default browser action (W3C) 
if ( e && e.preventDefault ) 
e.preventDefault(); 
else 
// A shortcut for stoping the browser action in IE 
window.event.returnValue = false; 
return false; 
}

其次,在关闭对话框的时候,我们希望能够提交表单,这也可以通过脚本来实现。就是调用表单对象的提交方法 submit();

在实现中,我们还需要找到控件的客户端标识,可以如下获取

var btnSaveId = "<%= this.btnSave.ClientID %>"; 
var form1Id = "<%= this.form1.ClientID %>";

按钮点击的客户端处理如下
// 注册按钮的点击事件处理 
$("#" + btnSaveId).click(function ( e ) { // 设置在关闭对话的时候提交表单 
var options = { 
closed: function () { 
alert("submit"); 
// 找到需要提交的表单 
$("#" + form1Id ).submit(); 
} 
}; 
// 显示 jBox 对话框 
var info = 'jQuery jBox<br /><br />版本:v2.0<br />日期:2011-7-24<br />'; 
info += '官网:<a target="_blank" href="http://kudystudio.com/jbox">http://kudystudio.com/jbox</a>'; 
$.jBox(info, options ); 
// 阻止默认的事件处理 
stopDefault(e); 
});

对于 jQuery 来说,在事件处理方法中返回 false 可以完成类似功能。

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。
stopDefault 则只阻止默认事件本身,不阻止事件冒泡。
还可以阻止事件冒泡,这需要调用下面的方法。

function stopBubble(e) { 
// If an event object is provided, then this is a non-IE browser 
if (e && e.stopPropagation) 
// and therefore it supports the W3C stopPropagation() method 
e.stopPropagation(); 
else 
// Otherwise, we need to use the Internet Explorer 
// way of cancelling event bubbling 
window.event.cancelBubble = true; 
}
Javascript 相关文章推荐
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
vue better-scroll插件使用详解
Jan 25 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 #Javascript
Javascript引用指针使用介绍
Nov 07 #Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 #Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 #Javascript
JS正则中的RegExp对象对象
Nov 07 #Javascript
js模拟点击事件实现代码
Nov 06 #Javascript
js判断变量是否未定义的代码
Mar 28 #Javascript
You might like
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
Javascript----文件操作
2007/01/18 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
python使用matplotlib绘制热图
2018/11/07 Python
基于django传递数据到后端的例子
2019/08/16 Python
python框架flask表单实现详解
2019/11/04 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
详解Python模块化编程与装饰器
2021/01/16 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
园林设计师自荐信
2013/11/18 职场文书
文明村创建实施方案
2014/03/27 职场文书
校园演讲稿汇总
2014/05/21 职场文书
党员服务承诺书
2014/05/28 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python