关于使用 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 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
js表头排序实现方法
Jan 16 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 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
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php字符集转换
2017/01/23 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
使用console进行性能测试
2015/04/27 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
python实现爬虫下载美女图片
2015/07/14 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Python线程指南分享
2019/11/19 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
python add_argument()用法解析
2020/01/29 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
应届大学生自荐信
2013/12/05 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
优质服务活动实施方案
2014/05/02 职场文书
环保倡议书500字
2014/05/15 职场文书
运动会演讲稿300字
2014/08/25 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
防止web项目中的SQL注入
2021/12/06 MySQL
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
Win11 BitLocker 驱动器加密
2022/04/19 数码科技
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python