关于使用 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 相关文章推荐
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
php将数据库导出成excel的方法
2010/05/07 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
js调用css属性写法
2013/09/21 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
Angular4 ElementRef的应用
2018/02/26 Javascript
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
2014年减负工作总结
2014/12/10 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
《失物招领》教学反思
2016/02/20 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript
python高温预警数据获取实例
2022/07/23 Python