项目中遇到这么个问题
项目中想利用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
分享到:
相关推荐
<button type="submit" name="submit" value="Submit">Submit</button> ``` ##### 20. `<canvas>` - **用途**:定义可绘制图形区域。 - **属性**: - `height`:画布高度。 - `width`:画布宽度。 - **示例**:...
在网页设计中,"Div 弹出信息框例子"是一个常见的需求,用于向用户展示重要的提示、警告或者交互信息。Div元素是HTML中的一个布局工具,全称为“Division”,意为区域划分,常用于创建复杂页面结构。在这个场景下,...
6. **表单元素**:了解HTML表单<form>的构造,包括输入元素<input>(如文本框、密码框、复选框、单选按钮等),文本区域<textarea>,下拉菜单<select>和选项<options>,以及提交<button>和重置<button>按钮。...
`<table>`、`<tr>`(行)、`<td>`(单元格)和`<th>`(表头)用于创建数据表格。`<caption>`可以添加表格标题,`<colgroup>`和`<col>`用于设置列样式。 6. 框架与布局: `frameset`和`frame`元素用于创建框架,但...
<option value="Firefox"> <option value="Safari"> </datalist> ``` ##### 2.8 `<datatemplate>` - **用途**:定义数据模板。 - **特点**:可以用来存储一组HTML元素,这些元素可以在需要时重复使用。 - **...
它通过各种标签来定义网页的结构,例如`<head>`、`<body>`、`<header>`、`<nav>`、`<section>`、`<article>`、`<aside>`和`<footer>`等。在仿制小米商城首页时,我们需要创建一个清晰的页面布局,包括顶部导航、轮播...
"JS弹出-兼容各大浏览器"这个主题旨在探讨如何确保JavaScript弹出功能在Chrome、Firefox、Safari、Edge以及Internet Explorer等主流浏览器上一致工作。 首先,最基本的弹出方式是`alert()`函数,它会显示一个包含...
块级元素如`<div>`、`<p>`和`<h1>`等,它们占据一整行,而内联元素如`<span>`、`<a>`和`<img>`则只占据自身内容所需的空间。在实验中,你可能会遇到如何使用这些元素来组织页面结构的实践。 标题和描述提到了"没做...
在`<body>`部分,各种元素如`<h1>`至`<h6>`用于定义标题等级,`<p>`用于段落,`<a>`用于创建超链接,`<img>`用于插入图片,`<div>`作为内容分组的容器,而`<ul>`和`<ol>`以及`<li>`则用于创建无序和有序列表。...
- **示例**: `<table><colgroup><col span="2"><col></colgroup><tr><th>Month</th><th>Sales</th><th>Expenses</th></tr></table>` ##### 26. **表格列组标签** `<colgroup>` - **描述**: 定义表格中的列组。 -...
例如,使用`<header>`、`<nav>`、`<main>`、`<footer>`等语义化标签来明确各个部分的功能,提高可读性和搜索引擎优化。 ##### 2. CSS样式设置 - **布局**:采用Flexbox或Grid布局来实现响应式设计,确保在不同设备...
本文将深入探讨如何使用CSS来实现在Internet Explorer(IE)和Firefox等浏览器上的半透明遮罩层效果。 首先,我们需要了解CSS中的`opacity`属性,它是实现半透明效果的关键。`opacity`属性用于设置元素的不透明度,...
- 需要考虑不同浏览器的兼容性问题,测试在主流浏览器(如Chrome、Firefox、Safari和Edge)中的表现。 - 对于复杂的报表布局,可能需要使用CSS Flexbox或Grid来实现更灵活的排版。 - 考虑屏幕阅读器和辅助技术的...
无论是在最新的Firefox、Chrome还是老旧的IE6/7/8,这条简短的Doctype声明都能让它们进入标准模式,从而确保页面在不同浏览器间的一致性和兼容性。 #### 二、`<figure>`标签 HTML 5引入了许多新标签以增强网页内容...
本篇文章将详细讲解如何利用JavaScript兼容Chrome和Firefox这两种主流浏览器,实现复制和粘贴功能。 首先,我们来看一下为什么复制粘贴在不同浏览器间会有兼容性问题。这是因为在JavaScript中,直接操作剪贴板的...
在"js弹出div获取弹出层中文本值"这个场景中,我们将讨论如何利用JavaScript实现这一功能,并确保它在主流浏览器如IE6+、Firefox(ff)等上兼容。 首先,我们需要创建一个可隐藏的div元素作为弹出层,然后在需要的...
<button type="submit">提交</button> </form> </section> </main> <footer> <p>版权所有 © 2023</p> </footer> </body> </html> ``` ### 六、总结 本次HTML5期末考核大作业旨在通过实际操作提升学生的...
<button id="openBtn">打开弹出层</button> <div id="popup" class="ug-popup"> 这是一个弹出层示例 </div> <script> $(document).ready(function() { $("#popup").ug({ width: 400, closeButton: true }...