`

HTML标签的<button>导致数据在firefox自动提交和在firefox里面弹出div窗口失败

 
阅读更多
项目中遇到这么个问题
项目中想利用div制造弹出窗口的操作
css文件
<style>
	    *{font-size:12px;}
		div{z-index:1;}
		#dialog-form {border:1px solid #000;width:400px;background:#fff;max-height:300px;
z-index:1000;position:absolute;display:none;top:40%;left:40%;margin-top:-100px;margin-left:-150px;}
		#dialog-form div#dialog-content{height:150px;overflow-y:auto;}
		#dialog-form h4{background:#CECECE;color:black;height:35px;margin:0px;} 
		#dialog-form h4 span {float:left;padding:10px;} 
		#dialog-form h4 span#close {float:right;cursor:pointer;} 
		#dialog-form h3{background:#fff;color:black;} 
		#dialog-form p{padding:2px 5px 5px 5px;}  
		#dialog-form input{padding:2px 2px 5px 5px;width:60px;margin:1px;} 
	</style>

js代码
function showDialog(){
			var showDia=document.getElementById('dialog-form');
			showDia.style.display = "block"; 
			mybg = document.createElement("div"); 
			mybg.setAttribute("id","mybg"); 
			mybg.style.background = "#000"; 
			mybg.style.width = "100%"; 
			mybg.style.height = "100%"; 
			mybg.style.position = "absolute"; 
			mybg.style.top = "0"; 
			mybg.style.left = "0"; 
			mybg.style.zIndex = "500"; 
			mybg.style.opacity = "0.3"; 
			mybg.style.filter = "Alpha(opacity=30)"; 
			document.body.appendChild(mybg);
		}
		function closeDialog(){
			var showDia=document.getElementById('dialog-form');
			var bg=document.getElementById('mybg');
			showDia.style.display="none";
			document.body.removeChild(bg);
		}

html代码
初衷是想点击检索按钮,弹出div
<form action="index.do">
.....
...
<button id="search" onclick="showDialog()">検索...</button>
</form>


下面是隐藏的窗口,等待js呼出div。但点击检索后,总是一闪而过,并且还是提交到Action数据
</div>
<div id="dialog-form" title="検索">
	<h4><span>検索</span><span id="close" onclick="closeDialog()">CLOSE</span></h4> 
		<form>
	<div id="dialog-content">
	<fieldset>
		<table width="80%" border="0" cellspacing="1" cellpadding="3"
			align="center" class="contentTable">
			<tr class="defaultBGColor">
				<td align="center" class="editLabel"></td>
				<td align="center" class="editLabel">グループ名</td>
			</tr>
			<%
				for(int i=0; i<result.size(); i++) {
			%>
			<tr class="defaultBGColor">
				<td align="center"><input type="checkbox" name="sub_group"
					value="<%=result.get(i)%>" /></td>
				<td id="groupName" align="center"><%=result.get(i)%></td>
			</tr>
			<%} %>
		</table>
	</fieldset>
	</div>
	<h3 style="text-align:right" ><input type="submit" value="OK"/><input  type="button" value="CANCEL" onclick="closeDialog()"/></h3>
	</form>
</div>


原因解释
引用

<button> 标签定义一个按钮。
   在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
    <button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。
    例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。
   唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

详细请见:http://www.w3school.com.cn/tags/tag_button.asp
分享到:
评论

相关推荐

    cuteEditor6.0

    You can also create your own policy files that define arbitrary permission sets.&lt;br/&gt;&lt;br/&gt;Comparison of the sample security policy file &lt;br/&gt;&lt;br/&gt; &lt;br/&gt;Permissions/Resource Setting Admin Default ...

    html入门到放弃笔记

    标记在使用时,用尖括号 "&lt;&gt;",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法:&lt;标记&gt;内容&lt;/标记&gt; Demo : 1、创建 p 标记 --&lt;p&gt;...&lt;/p&gt; 2、创建 div 标记 -- &lt;div&gt;&lt;/div&gt; 3、创建 ...

    左侧红色js悬浮QQ在线客服插件代码

    &lt;a title="隐藏" class="close_btn"&gt;&lt;span&gt;关闭&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="side_center"&gt; &lt;div class="qqserver"&gt; &lt;div class="KeFuTitle"&gt;在线客服&lt;/div&gt; &lt;div class="KeFuItem"&gt; &lt;a target="_blank" ...

    js(javascript)获取网页源码

    //FireFox、Opera等浏览器支持的创建方式 } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式 } } //直接通过XMLHttpRequest对象获取远程网页源代码 function getSource()...

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

    看上面的"结构树",其中&lt;myfile&gt;是父元素,&lt;title&gt;,&lt;author&gt;是它的子元素,而&lt;myfile&gt;又是&lt;filelist&gt;的子元素。象&lt;title&gt;这样没有包含任何子元素的最后一级元素我们也称之为"页元素"。 4.Parser(解析软件) Parser...

    JS分页效果JS分页效果

    Supported in Internet Explorer, Mozilla Firefox */ function showPages(name) { //初始化属性 this.name = name; //对象名称 this.page = 1; //当前页数 this.pageCount = 1; //总页数 this.argName = 'page...

    ExtAspNet_v2.3.2_dll

    -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性...

    kindeditor v3.4.3

    * 改善: 弹出框未指定任何按钮(yesButton, noButton, previewButton)时,不显示底部DIV。 ver 3.4.2 (2010-04-04) * 增加: 添加了KE.util.isEmpty函数,用于判断编辑器是否有可见内容。 * 改善: 页面很小时弹出菜单...

    addRule在firefox下的兼容写法

     要求改变某 div下所有子孙结点的样式,但不改变div本身样式。 我当时想都没有想就留下了一下代码: 代码如下:&lt;style&gt; span{background-color:blue;} input{background-color:gray} button{margin-top:70px;

    图库新版jQuery焦点图 JS代码

    document.writeln ('&lt;dd&gt;08月05日 网页背景和小图片添加打包下载&lt;/dd&gt;'); document.writeln ('&lt;dd&gt;07月12日 修复搜索、导航和返回顶部BUG&lt;/dd&gt;'); document.writeln ('&lt;dd&gt;06月26日 改进网页背景频道预览功能&lt;/dd&gt;')...

    Knockout API 中文版

    &lt;button data-bind="enable: myItems().count &lt; 5"&gt;Add&lt;/button&gt;之后,如果你要实现Delete功能,不必指出如何操作UI元素,只需要修改数据模型就可以了。 Later, when you’re asked to implement the ‘Delete’ ...

    angular-simpe-tabs:角度简单制表符

    &lt; div s-tab =' myTabName '&gt; &lt;/ div&gt; &lt; button s-toggle-tab =' myTabName ' &gt; &lt;/ button &gt; 如何运行规格 npm install -g karma-cli npm install -g凉亭 npm安装 凉亭安装 业障启动--no-auto-watch-...

    精通JavaScript

    Mozilla Firefox 1.5.0.3或更高版本 服务器采用IIS5.1 或以上版本 数据库使用MS Access 2000以上 2.本书所附光盘实例代码: 第1章(\第1章) 查看1.2.htm中noscript显示效果的方法如下: 1.将该实例复制到C:\...

    IE8 内存泄露(内存一直增长 )的原因及解决办法

    最近开发的时候对页面使用了定时的局部更新,结果在ie6,7和Firefox下,一切正常,而在ie8下过上几个小时就浏览器就崩溃了,显示是内存溢出,我以为是代码写的不好导致内存泄露,但是ie6,7又正常,调查了一下,原来...

    jquery利用event.which方法获取键盘输入值的代码

    实例 显示按了哪个键: $(“input”).keydown(function(event){ $(“div”).html(“Key:... which 是Firefox引入的,IE不支持。which的本意是获取键盘的键值(keyCode)。 jQuery中的which即可以是键盘的键值,也可以是鼠

    WPTools.v6.29.1.Pro

    Close &lt;div&gt; tags when extracting text from fields 19.10.2011 - WPTools 6.21 + CodeLocate can now also accessed in non-visual TWPRTFDataCollection and not just TWPCustomRtfEdit + CodeSelect can now ...

    ngPreviewCover:这是fb个人封面之类的预览封面

    div ng-preview-cover drag-text =" drag photo " update-button-text =" update cover photo " image =" image " on-load =" onLoad(base64) " on-cancel =" onCancel() " cover-loading =" coverLoading " on-e

Global site tag (gtag.js) - Google Analytics