项目中遇到这么个问题
项目中想利用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
分享到:
相关推荐
You can also create your own policy files that define arbitrary permission sets.<br/><br/>Comparison of the sample security policy file <br/><br/> <br/>Permissions/Resource Setting Admin Default ...
标记在使用时,用尖括号 "<>",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法:<标记>内容</标记> Demo : 1、创建 p 标记 --<p>...</p> 2、创建 div 标记 -- <div></div> 3、创建 ...
<a title="隐藏" class="close_btn"><span>关闭</span></a></div> <div class="side_center"> <div class="qqserver"> <div class="KeFuTitle">在线客服</div> <div class="KeFuItem"> <a target="_blank" ...
//FireFox、Opera等浏览器支持的创建方式 } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式 } } //直接通过XMLHttpRequest对象获取远程网页源代码 function getSource()...
看上面的"结构树",其中<myfile>是父元素,<title>,<author>是它的子元素,而<myfile>又是<filelist>的子元素。象<title>这样没有包含任何子元素的最后一级元素我们也称之为"页元素"。 4.Parser(解析软件) Parser...
Supported in Internet Explorer, Mozilla Firefox */ function showPages(name) { //初始化属性 this.name = name; //对象名称 this.page = 1; //当前页数 this.pageCount = 1; //总页数 this.argName = 'page...
-修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性...
-修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性...
* 改善: 弹出框未指定任何按钮(yesButton, noButton, previewButton)时,不显示底部DIV。 ver 3.4.2 (2010-04-04) * 增加: 添加了KE.util.isEmpty函数,用于判断编辑器是否有可见内容。 * 改善: 页面很小时弹出菜单...
要求改变某 div下所有子孙结点的样式,但不改变div本身样式。 我当时想都没有想就留下了一下代码: 代码如下:<style> span{background-color:blue;} input{background-color:gray} button{margin-top:70px;
document.writeln ('<dd>08月05日 网页背景和小图片添加打包下载</dd>'); document.writeln ('<dd>07月12日 修复搜索、导航和返回顶部BUG</dd>'); document.writeln ('<dd>06月26日 改进网页背景频道预览功能</dd>')...
<button data-bind="enable: myItems().count < 5">Add</button>之后,如果你要实现Delete功能,不必指出如何操作UI元素,只需要修改数据模型就可以了。 Later, when you’re asked to implement the ‘Delete’ ...
< div s-tab =' myTabName '> </ div> < button s-toggle-tab =' myTabName ' > </ button > 如何运行规格 npm install -g karma-cli npm install -g凉亭 npm安装 凉亭安装 业障启动--no-auto-watch-...
Mozilla Firefox 1.5.0.3或更高版本 服务器采用IIS5.1 或以上版本 数据库使用MS Access 2000以上 2.本书所附光盘实例代码: 第1章(\第1章) 查看1.2.htm中noscript显示效果的方法如下: 1.将该实例复制到C:\...
最近开发的时候对页面使用了定时的局部更新,结果在ie6,7和Firefox下,一切正常,而在ie8下过上几个小时就浏览器就崩溃了,显示是内存溢出,我以为是代码写的不好导致内存泄露,但是ie6,7又正常,调查了一下,原来...
实例 显示按了哪个键: $(“input”).keydown(function(event){ $(“div”).html(“Key:... which 是Firefox引入的,IE不支持。which的本意是获取键盘的键值(keyCode)。 jQuery中的which即可以是键盘的键值,也可以是鼠
Close <div> 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 ...
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