<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易弹出框</title>
<style type="text/css">
.mydiv {
background-color: #ff6;
border: 5px solid #f90;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top: 50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 */
margin-top:-60px!important;/*FF IE7 */

margin-top:0px;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}

.bg {
background-color: #ccc;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=10);/*IE*/
opacity:0.8;/*FF*/
z-index:1;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}
/*The END*/

</style>
<script type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
}

function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}

</script>

</head>

<body>

<div id="popDiv" class="mydiv" style="display:none;"><br/>弹框内容<br/>
<a href="javascript:closeDiv()">关闭</a></div>
<div id="bg" class="bg" style="display:none;"></div>

<div style="padding-top: 20px;">
<input type="Submit" name="" value="点此弹框" onclick="javascript:showDiv()" />
</div>
</body>
</html>

js简单的弹出框有关闭按钮的更多相关文章

  1. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  2. 代码录播：jQueryMobile 实现一个简单的弹出框效果

    今天给大家带来的是 jQueryMobile 实现一个简单的弹出框效果,有兴趣的童鞋可以试试哦~ ^_^ 阅读原文:www.gbtags.com  

  3. JavaScript 实现简单的 弹出框关闭框

    JavaScript 实现简单的 弹出框关闭框 知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素 代码献上: & ...

  4. layer.js漂亮的弹出框

    它的官方网站:http://layer.layui.com/ 消息.确认框.ifame.自定义文本.旋转木马,都有按钮,是一款强大的js 弹出框: 以下为本人的简单介绍: layer.open({ t ...

  5. Openlayer 3 最简单的弹出框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Bootstrap的js插件之弹出框(popover)

    data-toggle="popover"--使弹出框可以切换状态: title--设置弹出框的标题: data-content--设置弹出框的内容部分: data-placeme ...

  7. jquery实现简单的弹出框

    弹出框本身是一个div,默认是隐藏不展示的,在需要弹框的时候使其显示,并浮在当前页面之上 弹框样式: .tanchuang { width: 100%; height: 100%; display: ...

  8. datatables.js 简单使用--弹出编辑框或添加数据框

    内容:选中某一条记录,弹出编辑框 环境:asp.net mvc ,  bootstrap 显示效果: 代码: 至于怎么弄多选框,在上一篇博客里已经有说明. 主要用到了bootstrap的模态窗,下面代 ...

  9. 前段js的各种弹出框

    artDialog 首页 > 文档与示例 artDialog —— 经典的网页对话框组件,内外皆用心雕琢. 支持普通与 12 方向气泡状对话框 完善的焦点处理,自动焦点附加与回退 支持 ARIA ...

随机推荐

  1. 链队列的C++实现

    #include<iostream> using namespace std; //节点类 template<class T> struct QNode { T data; Q ...

  2. iOS自定义组与组之间的距离以及视图

    iOS自定义组与组之间的距离以及视图 //头视图高度 - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(N ...

  3. org.eclipse.jdt.internal.compiler包下的类找不到

    到maven库上下载jar包:org.eclipse.jdt.core-3.13.jar <!-- https://mvnrepository.com/artifact/org.eclipse. ...

  4. 寻找最大的k个数问题

    这是编程之美书第2.5节的一道题目. 各种解法: 解法一,用nlgn复杂度的排序算法对数组进行从大到小排序,取前K个.但这方法做了两件不必要做的事:它对想得到的K个数进行了排序,对不想得到的n-K个数 ...

  5. JS地毯式学习一

    1.<noscript> 现代浏览器都对JavaScript进行了支持,一般是在用户的浏览器禁用了脚本的情况下才会显示<noscript>的内容. 包含在<noscrip ...

  6. Oracle数据误删除的恢复操作

    flashbackup 闪回操作: 1. 打开表的闪回功能: alter table dw_stg.fm_user_play_d enable row movement; 2. 查询要闪回的表的记录信 ...

  7. KBEngine 服务器端-loginapp-协议构建、解析执行详细介绍

    宏宏宏 由于 C++ 是静态语言,不能像 js 一样通过函数名字符串来直接执行函数,所以将 messageId 映射到可执行函数的复杂性大大提升:KBEngine 使用了一系列精巧的「宏」来解决这个问 ...

  8. Firefox 在LR录制过程中添加例外的问题解决方法

    用lr调火狐打开网页  会报证书安全问题 证书安全提示目的是告诉你这个服务器使用的证书可能不安全,要不要信任,你自己决定,不信任就不能访问.为什么会报证书安全,因为浏览器没添加该证书.或者由于性能工具 ...

  9. 软件测试工具MonkeyTalk使用方法

    1.简单介绍 MonkeyTalk软件测试工具由两部分构成:MonkeyTalk IDE 和 MonkeyTalk Agents MonkeyTalk IDE是Eclipse平台的工具,工能是:对iO ...

  10. UML总结--总体架构

    架构图(一): 架构图(二): 转自:http://blog.csdn.net/lsh6688/article/details/5931706