`

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
分享到:
评论

相关推荐

    HTML 5 标签参考

    &lt;button type="submit" name="submit" value="Submit"&gt;Submit&lt;/button&gt; ``` ##### 20. `&lt;canvas&gt;` - **用途**:定义可绘制图形区域。 - **属性**: - `height`:画布高度。 - `width`:画布宽度。 - **示例**:...

    Div 弹出信息框例子

    在网页设计中,"Div 弹出信息框例子"是一个常见的需求,用于向用户展示重要的提示、警告或者交互信息。Div元素是HTML中的一个布局工具,全称为“Division”,意为区域划分,常用于创建复杂页面结构。在这个场景下,...

    HTML全套学习资料

    6. **表单元素**:了解HTML表单&lt;form&gt;的构造,包括输入元素&lt;input&gt;(如文本框、密码框、复选框、单选按钮等),文本区域&lt;textarea&gt;,下拉菜单&lt;select&gt;和选项&lt;options&gt;,以及提交&lt;button&gt;和重置&lt;button&gt;按钮。...

    畅游HTML enjoy-html

    `&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;td&gt;`(单元格)和`&lt;th&gt;`(表头)用于创建数据表格。`&lt;caption&gt;`可以添加表格标题,`&lt;colgroup&gt;`和`&lt;col&gt;`用于设置列样式。 6. 框架与布局: `frameset`和`frame`元素用于创建框架,但...

    HTML5中文参考手册

    &lt;option value="Firefox"&gt; &lt;option value="Safari"&gt; &lt;/datalist&gt; ``` ##### 2.8 `&lt;datatemplate&gt;` - **用途**:定义数据模板。 - **特点**:可以用来存储一组HTML元素,这些元素可以在需要时重复使用。 - **...

    html+css仿小米商城首页搜索页和商品详情页

    它通过各种标签来定义网页的结构,例如`&lt;head&gt;`、`&lt;body&gt;`、`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;section&gt;`、`&lt;article&gt;`、`&lt;aside&gt;`和`&lt;footer&gt;`等。在仿制小米商城首页时,我们需要创建一个清晰的页面布局,包括顶部导航、轮播...

    JS弹出-兼容各大浏览器

    "JS弹出-兼容各大浏览器"这个主题旨在探讨如何确保JavaScript弹出功能在Chrome、Firefox、Safari、Edge以及Internet Explorer等主流浏览器上一致工作。 首先,最基本的弹出方式是`alert()`函数,它会显示一个包含...

    html实验的例子(有些没做完,可能与浏览器环境有关)

    块级元素如`&lt;div&gt;`、`&lt;p&gt;`和`&lt;h1&gt;`等,它们占据一整行,而内联元素如`&lt;span&gt;`、`&lt;a&gt;`和`&lt;img&gt;`则只占据自身内容所需的空间。在实验中,你可能会遇到如何使用这些元素来组织页面结构的实践。 标题和描述提到了"没做...

    HTML简单代码

    在`&lt;body&gt;`部分,各种元素如`&lt;h1&gt;`至`&lt;h6&gt;`用于定义标题等级,`&lt;p&gt;`用于段落,`&lt;a&gt;`用于创建超链接,`&lt;img&gt;`用于插入图片,`&lt;div&gt;`作为内容分组的容器,而`&lt;ul&gt;`和`&lt;ol&gt;`以及`&lt;li&gt;`则用于创建无序和有序列表。...

    HTML5技术参考表

    - **示例**: `&lt;table&gt;&lt;colgroup&gt;&lt;col span="2"&gt;&lt;col&gt;&lt;/colgroup&gt;&lt;tr&gt;&lt;th&gt;Month&lt;/th&gt;&lt;th&gt;Sales&lt;/th&gt;&lt;th&gt;Expenses&lt;/th&gt;&lt;/tr&gt;&lt;/table&gt;` ##### 26. **表格列组标签** `&lt;colgroup&gt;` - **描述**: 定义表格中的列组。 -...

    基于web在线餐饮网站的设计与实现——仿Coco线上订奶茶饮料6个页面(HTML+CSS+JavaScript)

    例如,使用`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;footer&gt;`等语义化标签来明确各个部分的功能,提高可读性和搜索引擎优化。 ##### 2. CSS样式设置 - **布局**:采用Flexbox或Grid布局来实现响应式设计,确保在不同设备...

    div层实现IE Firefox 页面半透明遮罩效果弹窗

    本文将深入探讨如何使用CSS来实现在Internet Explorer(IE)和Firefox等浏览器上的半透明遮罩层效果。 首先,我们需要了解CSS中的`opacity`属性,它是实现半透明效果的关键。`opacity`属性用于设置元素的不透明度,...

    HTML实现打印简单报表(轻量级)

    - 需要考虑不同浏览器的兼容性问题,测试在主流浏览器(如Chrome、Firefox、Safari和Edge)中的表现。 - 对于复杂的报表布局,可能需要使用CSS Flexbox或Grid来实现更灵活的排版。 - 考虑屏幕阅读器和辅助技术的...

    初学者必知的HTML 5入门级技巧

    无论是在最新的Firefox、Chrome还是老旧的IE6/7/8,这条简短的Doctype声明都能让它们进入标准模式,从而确保页面在不同浏览器间的一致性和兼容性。 #### 二、`&lt;figure&gt;`标签 HTML 5引入了许多新标签以增强网页内容...

    js兼容chrome、firefox复制、粘贴

    本篇文章将详细讲解如何利用JavaScript兼容Chrome和Firefox这两种主流浏览器,实现复制和粘贴功能。 首先,我们来看一下为什么复制粘贴在不同浏览器间会有兼容性问题。这是因为在JavaScript中,直接操作剪贴板的...

    js弹出层并获取弹出层文本内容

    在"js弹出div获取弹出层中文本值"这个场景中,我们将讨论如何利用JavaScript实现这一功能,并确保它在主流浏览器如IE6+、Firefox(ff)等上兼容。 首先,我们需要创建一个可隐藏的div元素作为弹出层,然后在需要的...

    HTML5期末考核大作业、HTML个人主页界面设计源码

    &lt;button type="submit"&gt;提交&lt;/button&gt; &lt;/form&gt; &lt;/section&gt; &lt;/main&gt; &lt;footer&gt; &lt;p&gt;版权所有 © 2023&lt;/p&gt; &lt;/footer&gt; &lt;/body&gt; &lt;/html&gt; ``` ### 六、总结 本次HTML5期末考核大作业旨在通过实际操作提升学生的...

    js弹出层插件

    &lt;button id="openBtn"&gt;打开弹出层&lt;/button&gt; &lt;div id="popup" class="ug-popup"&gt; 这是一个弹出层示例 &lt;/div&gt; &lt;script&gt; $(document).ready(function() { $("#popup").ug({ width: 400, closeButton: true }...

Global site tag (gtag.js) - Google Analytics