项目中遇到这么个问题
项目中想利用div制造弹出窗口的操作
css文件
js代码
html代码
初衷是想点击检索按钮,弹出div
[color=green]下面是隐藏的窗口,等待js呼出div。但点击检索后,总是一闪而过,并且还是提交到Action数据[/color]
原因解释
[quote]
<button> 标签定义一个按钮。
在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。
例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。
[/quote]
详细请见:[url]http://www.w3school.com.cn/tags/tag_button.asp[/url]
项目中想利用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>
[color=green]下面是隐藏的窗口,等待js呼出div。但点击检索后,总是一闪而过,并且还是提交到Action数据[/color]
</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>
原因解释
[quote]
<button> 标签定义一个按钮。
在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。
例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。
[/quote]
详细请见:[url]http://www.w3school.com.cn/tags/tag_button.asp[/url]