<!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. win64位操作系统下安装pl/sql developer 并登录连接到oracle12c

    1)安装Oracle 12c 64位2)安装32位的Oracle客户端( instantclient-basic-nt-12.1.0.1.0)下载instantclient-basic-nt-12.1 ...

  2. C++面向对象程序设计的一些知识点（5）

    摘要:运算符能给程序员提供一种书写数学公式的感觉,本质上运算符也是一种函数,因此有类内部运算符和全局运算符之分,通过重载,运算符的“动作”更加有针对性,编写代码更像写英文文章. 1.C++标准允许将运 ...

  3. oracle中的字符串函数详解

    花了点时间 复习.了一下字符串函数 希望对初学者有帮助 ----------连接字符串函数-----------------select concat('leiyi','hubei') from du ...

  4. js中引号("")中间设置变量

  5. ehcache OR Memcache

    ehcache是纯java编写的,通信是通过RMI方式,适用于基于java技术的项目.memcached服务器端是c编写的,客户端有多个语言的实现,如c,php(淘宝,sina等各大门户网站),pyt ...

  6. 全屏API接口

    HTML5的诞生给我们提供了很多精彩的JavaScript和HTML新功能和新特征.有些新特征我们已知多年并大量的使用,而另外一些主要是用在前沿的手机移动技术上,或者桌面应用中起辅助作用.不管这些HT ...

  7. Gradle 庖丁解牛（构建生命周期核心托付对象创建源代码浅析）

    [工匠若水 http://blog.csdn.net/yanbober 未经同意严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 上一篇<Gradle 庖丁解牛(构建源头源代码浅析)> ...

  8. 【C#】关闭 Window 之后，无法设置 Visibility，也无法调用 Show、ShowDialogor 或 WindowInteropHelper.EnsureHandle

    问题: 在做WPF项目时,点击一个按钮弹出一个自定义的窗体,然后点击X关闭该窗体,然后再点击按钮想弹出该窗体时,报错:关闭 Window 之后,无法设置 Visibility,也无法调用 Show.S ...

  9. 解决javaWEB 下载文件中文名称乱码问题

    response.setContentType("application/x-msdownload;"); response.setCharacterEncoding(" ...

  10. Android——SQLite数据库（一）创建数据库、创建表、初始化数据

    xml <Button android:layout_width="match_parent" android:layout_height="wrap_conten ...