关于使用 jBox 对话框的提交不能弹出问题解决方法_javascript技巧

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;
}

时间: 2024-12-08 17:33:57

关于使用 jBox 对话框的提交不能弹出问题解决方法_javascript技巧的相关文章

js实现仿qq消息的弹出窗效果_javascript技巧

在我们的日常开发中,或者生活中,经常需要用到弹出窗.这里我们就用js模拟一下qq消息一样的弹出窗,分享给大家供大家参考,具体内容如下 运行效果截图: 直接贴代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>javaScript实现网页右下角弹出窗口代码</title> &l

基于JavaScript实现弹出框效果_javascript技巧

  首先我们来分析弹出框的部件.简单弹出框分为头,内容,尾部. 头部中有标题和关闭按钮,内容就可以图文,媒体,iframe,flash等等,尾部就是按钮(确认,取消等等),这个例子尾部我就不加入按钮了,这个例子主要是实现弹出框的核心部分. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body,

JavaScript制作弹出层效果_javascript技巧

先给大家展示下效果图,效果图如下所示: 1.引用相关easyui.min.js,easyui-lang-zh_CN.js 等js 文件: 2.前台代码 <input type="text" id="txt_Type" style="display:none" /> <div class="macFormItem" id="divSQXLH" runat="server"

Javascript公共脚本库系列(一): 弹出层脚本_javascript技巧

一.摘要 本系列文章是为了抽象通用的,跨浏览器的脚本方法. 本篇文章讲解弹出浮动层的javascript函数, 以及函数的原理和使用注意事项. 二.实现效果 用脚本弹出浮动层是我们最常用的脚本方法之一.下面是效果图:  点击图中的"航空公司"后,会在"航空公司"下面弹出浮动层. 在网上弹出框的脚本相当多, 而且还有各种第三方JS框架可供我们使用.但是其中有的脚本过于简单,仅仅粗略的实现弹出效果而忽略了灵活性,通用性和跨浏览器特性. 使用JS框架又有些杀鸡用牛刀.所以

纯js实现仿QQ邮箱弹出确认框_javascript技巧

代码非常简单,这里就不多废话了. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <TITLE>QQ邮箱的弹出层</TITLE> <meta http-equiv="Co

JSP防止网页刷新重复提交数据的几种方法_javascript技巧

本篇文章主要介绍了网页如何防止刷新重复提交与如何防止后退的解决方法,具体如下: 提交后禁用提交按钮(大部分人都是这样做的) 如果客户提交后,按F5刷新怎么办? 使用Session 在提交的页面也就是数据库处理之前: if session("ok")=true then response.write "错误,正在提交" response.end end if 数据处理完后,修改session("ok")=false. 数据处理成功马上Redirec

jquery插件jquery.confirm弹出确认消息_javascript技巧

本文为大家介绍了插件jquery.confirm弹出确认消息的实现方法,具有一定的参考价值,特分享给大家供大家参考,具体内容如下 实现效果: 具体代码: 1.插件默认参数 // 默认参数 $.confirm.defaults = { // 样式 css: "http://static.qianduanblog.com/css/jquery.confirm/default.min.css?v=" + Math.ceil(new Date() / 86400000), // 确认框内容 c

js登录弹出层特效_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

js实现a标签超链接提交form表单的方法_javascript技巧

本文实例讲述了js实现a标签超链接提交form表单的方法.分享给大家供大家参考.具体实现方法如下: <form action="/home/search" method="get" id="search_form"> <div class="searchBox png" id="searchBox"> <input type="text" id="