关于使用 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 动态设置已知select的option的value值的代码
Dec 16 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
JavaScript表单验证开发
Nov 23 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 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加密专家(PHPCodeLock)
2010/05/06 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
Python基础教程之利用期物处理并发
2018/03/29 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
python enumerate内置函数用法总结
2020/01/07 Python
浅析Python __name__ 是什么
2020/07/07 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
捐资助学倡议书
2014/04/15 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
研究生简历自我评
2015/03/11 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android