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