关于使用 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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
番茄的表单验证类代码修改版
Jul 18 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
js计时事件实现圆形时钟
Mar 25 Javascript
Preload基础使用方法详解
Feb 03 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
用PHP制作静态网站的模板框架
2006/10/09 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
python获取网页状态码示例
2014/03/30 Python
Python程序中设置HTTP代理
2016/11/06 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
对python sklearn one-hot编码详解
2018/07/10 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
python 内置函数汇总详解
2019/09/16 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
python程序如何进行保存
2020/07/03 Python
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
华为python面试题
2016/05/03 面试题
医院工作检讨书范文
2014/02/10 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
共青团员自我评价范文
2014/09/14 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android