<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>jQuery弹出层效果</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<style>
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity = 80);
}
.white_content {
display: none;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border: 16px solid lightblue;
background-color: white;
z-index: 1002;
overflow: auto;
}
.white_content_small {
display: none;
position: absolute;
top: 20%;
left: 30%;
width: 40%;
height: 50%;
border: 16px solid lightblue;
background-color: white;
z-index: 1002;
overflow: auto;
}
</style>
<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div, bg_div) {
document.getElementById(show_div).style.display = 'block';
document.getElementById(bg_div).style.display = 'block';
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
$("#" + bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div, bg_div) {
document.getElementById(show_div).style.display = 'none';
document.getElementById(bg_div).style.display = 'none';
};
</script>
<script type="text/javascript">
$(function() {
for ( var i = 1; i <= 10; i++) {
insertRow(i);
}
});
function insertRow(seq) {
$("tbody").append(
"<tr>" + "<td><input type='checkbox'/></td>"
+ "<td><input type='text' value='"+seq+"'/></td>"
+ "<td><input type='text' value='"+seq+"'/></td>"
+ "</tr>");
}
function addRow() {
var rowCount = $("tbody > tr").length;
insertRow(++rowCount);
}
function delRow() {
$("input:checked").each(function() {
$(this).parent().parent().remove();
});
}
</script>
</head>
<body>
<input id="Button1" type="button" value="添加代理人"
onclick="ShowDiv('MyDiv','fade')" />
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay"></div>
<div id="MyDiv" class="white_content">
<div style="text-align: right; cursor: default; height: 40px;">
<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
</div>
<div>
<table id="tab" border="1" width="90%">
<thead style="cellpadding:0,cellspacing:0">
<tr>
<th></th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<div>
<input type="button" value="add" id="add" onclick="addRow()"/>
<input type="button" value="del" id="del" onclick="delRow()"/>
</div>
</tfoot>
</table>
</div>
</div>
</body>
</html>
分享到：
相关推荐
html下各种弹出框模板（提示框，确定+取消，确定等）包括调用的js和css文件。实测可用，。。。。。。。。。。。。。。。。。。。。。。。。。。。。
使用js动态增加记录：点击文本框，弹出自己制作的div，有表头，有底，中间内容如果过长，还可以自动滚动。可以动态的添加和删除一条记录
* 改善: 弹出框未指定任何按钮(yesButton, noButton, previewButton)时，不显示底部DIV。 ver 3.4.2 (2010-04-04) * 增加: 添加了KE.util.isEmpty函数，用于判断编辑器是否有可见内容。 * 改善: 页面很小时弹出菜单...
通过传递域v2.1.6.7可以更加方便：*，添加块Div弹出窗口（按ID /类名）（更有效！）v2.1.6.6：*，更改程序包名称（避免版本检查与原始扩展名冲突） ）*，在当前页面V2.1.6.3上添加快速删除cookie：*，更新正则表达式...
添加节点 修改节点 删除节点 </div> </body> [removed] //所有div标签class为dTreeNode的绑定此右键菜单 $('div.dTreeNode').contextMenu('myMenu1', { onContextMenu: function(e)...
比如关于一些添加，删除，修改的弹出框，当添加一些用户的时候，弹出框里要提交一些关于用户的信息，设置密码等信息，当修改的时候，根据用户的名字和id号来修改密码等等。 例子如下： 代码如下: ”tabPanel> ”...
第一步：安装vue-cli cnpm install -g @vue/cli 第二步：新建一个项目 1.新建项目 （vue-openlayers为项目名）,并选择default模版 vue create vue-openlayers 2.安装openlayers cnpm i -S ol ...div id=map
1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 ...
1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 ...
在Vue中，如果我们想要动态地来控制一个组件的显示和隐藏，比如通过点击按钮显示一个对话框或者弹出一条信息。我们通常会提前写好这个组件，然后通过v-if = “show”来控制它的显示隐藏。如下所示： <div> <...
4当前HTML代码的基础上添加缩写，将向外扩展代码shift+ctrl+g，弹出：Enter Wrap Abbreviation（输入扩展缩写） 5在鼠标光标处按快捷键ctrl+d，将会选择光标所在标签范围内的所有内容，多次运行将扩大选择。有扩大就...
弹出LegalServer注释 将两个html格式的指令块引入到Case Profile中，您的用户可以通过添加令牌#POP！来固定重要的案例笔记。 注意。 具有特殊标记的注释将从常规的案例注释集合中弹出到第一条指令中。 如果您将第一...
33：忠网弹出广告修正 34：后台2处管理权限修正 35：上传漏洞补丁包， 远程非法提交，权限提升，SQL注入漏洞，完全补丁，以及其他小功能增强 36：远程非法提交，权限提升，SQL注入漏洞修正补修正，以及新闻上下篇...
5.广告系统：支持矩形横幅 、弹出窗口 、随屏移动、固定位置、漂浮移动、文字代码，同时支持JPG、SWF、GIF、文本、代码和页面，并自动生成JS代码文件。 6.后台系统：管理企业、个人的求职（招聘）信息、基本资料...
1.1 弹出窗口控制 2 实例001 打开新窗口显示广告信息 2 实例002 定时打开窗口 4 实例003 通过按钮创建窗口 5 实例004 自动关闭的广告窗口 6 实例005 控制弹出窗口居中显示 7 实例006 弹出的窗口之Cookie控制 9 实例...
强大的商品管理无疑给管理者提供了便利，新增的弹出图片显示功能，只需将鼠标移到商品上，即可弹出此商品的图片，非常方便，同时前台报价中心也增加了鼠标指向后显示图片的功能，提供用户的购买欲望。 二七、增加...
强大的商品管理无疑给管理者提供了便利，新增的弹出图片显示功能，只需将鼠标移到商品上，即可弹出此商品的图片，非常方便，同时前台报价中心也增加了鼠标指向后显示图片的功能，提供用户的购买欲望。 二八、增加...
-为ExtAspNet.Alert添加两个静态方法ShowInParent和GetShowInParentReference，用于在父页面弹出窗口。 +在aspx页面中必须显示的声明控件的集合属性（比如Tabs(TabStrip), Items(PanelBase), Nodes(TreeNode)）。 ...
jquery 做的控件集,包括日期控件，table行动态添加删除，div弹出框等
强大的商品管理无疑给管理者提供了便利，新增的弹出图片显示功能，只需将鼠标移到商品上，即可弹出此商品的图片，非常方便，同时前台报价中心也增加了鼠标指向后显示图片的功能，提供用户的购买欲望。 二八、增加...