关于使用 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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
js实现的订阅发布者模式简单示例
Mar 14 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 set_time_limit()函数的使用详解
2013/06/05 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
popdiv
2006/07/14 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
学习Node.js模块机制
2016/10/17 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
VUE重点问题总结
2018/03/19 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
小学体育教学反思
2014/01/31 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
2014年班组工作总结
2014/11/20 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
2014年法务工作总结
2014/12/11 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js