<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

    #login

    {

        display:none;

        border:1em solid #3366FF;

        height:30%;

        width:50%;

        position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/

        top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/

        left:24%;

        z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/

        background: white;

    }

    #over

    {

        width: 100%;

        height: 100%;

        opacity:0.8;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/

        filter:alpha(opacity=80);

        display: none;

        position:absolute;

        top:0;

        left:0;

        z-index:1;

        background: silver;

    }

    </style>

</head>

<body>

  <a href="javascript:show()">弹出</a>

  <div id="login">

      <a href="javascript:hide()">关闭</a>

      <div>这里是关闭弹窗的内容</div>

  </div>

  <div id="over"></div>

</body>

</html>  

<script type="text/javascript">  

    function show()

    {

        var login = document.getElementById('login');

        var over = document.getElementById('over');

        login.style.display = "block";

        over.style.display = "block";

    }

    function hide()

    {

       var login = document.getElementById('login');

        var over = document.getElementById('over');

        login.style.display = "none";

        over.style.display = "none";

    }

</script>

一个简单的div弹出层的小例子的更多相关文章

  1. layer —— 一个简单的jQuery弹出层插件

    layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...

  2. 转 js一个简单实用的弹出层

      关闭 点击查看 >> <html> <head> <title>新文件标题</title> <script type=" ...

  3. LODOP内嵌挡住浏览器的div弹出层

    首先,做一个简单的div弹出层用于测试,该弹出层的介绍可查看本博客另一篇博文:[JS新手教程]浏览器弹出div层 然后加入LODOP内嵌,LODOP可以内嵌,C-LODOP不能内嵌,可以在IE等浏览器 ...

  4. webui-popover 一个轻量级的jquery弹出层插件

    该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用.它支持IE7以上的浏览器. 首先要引入需要的css  js  文件 <link rel="s ...

  5. 分享一个ASP.NET的弹出层，比较好用！

    网上的一些弹出层的控件多了去了,我很久之前用了一个,效果还不错,但如果应用到ASP.NET的话,会出现“弹出层内的控件runat='server'失效”的情况,具体情况我也不太会描述,但就是那些onc ...

  6. 页面DIV弹出层 JS原生脚本

    <script type="text/javascript"> /*         * 弹出DIV层         */ function showDiv() { ...

  7. div弹出层的效果带关闭按钮

    下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .t ...

  8. layer.js,,,分享一个好用的弹出层

    基本属性: <!DOCTYPE html> <html> <head> <head> <meta content="text/html; ...

  9. 关于div弹出层的实际应用心得

    今天本人要做一个点击弹出的功能,因为这个功能是最后做的,所以写的时候很纠结, 因为本人小菜一枚, 开始尝试用 position:relative:来做一试不行呀 ,因为用这个来做的话 会打乱原有的布局 ...

随机推荐

  1. 微信小程序开发之模板

    一.简介 WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用. 定义模板 使用name属性,作为模板的名字.然后在<template/>内定义代码片段,如 ...

  2. Centos6.4三种更改hostname的方法之间的对比

    首先,利用hostname命令查看一下当前主机的主机名,在终端输入hostname,会发现显示的是完整的主机名称(主机名.域名),其中主机名与进入终端后:登录名@主机名,显示的一致,如下图所示: 其次 ...

  3. ASP.NET Core Web API下事件驱动型架构的实现（二）：事件处理器中对象生命周期的管理

    在上文中,我介绍了事件驱动型架构的一种简单的实现,并演示了一个完整的事件派发.订阅和处理的流程.这种实现太简单了,百十行代码就展示了一个基本工作原理.然而,要将这样的解决方案运用到实际生产环境,还有很 ...

  4. MySQL数据类型转换函数CAST与CONVERT的用法

    MySQL 的CAST()和CONVERT()函数可用来获取一个类型的值,并产生另一个类型的值.两者具体的语法如下: 1.CAST(value as type) 就是CAST(xxx AS 类型) 2 ...

  5. UML中类图的一些基本知识

    一.类 类(class)封装了数据和行为,是面向对象的重要组成部分,他是具有相同操作.属性.关系的对象集合的总称. 在软件运行时,类被实例化成对象(object),对象对应某个具体的事物,是类的实例( ...

  6. VS2015配置内核WDK7600环境,32位下.

    VS2015配置内核WDK7600环境,32位下. 学习内核驱动的编写,就要会配置环境.不然总是用记事本编写.比较不方便. 环境配置如下. 1.首先下载WDK7600, 课堂资料代码中已经上传.链接: ...

  7. Zabbix实战-简易教程（8）--添加item

    一.术语 1.1 Item概念 Item是从主机里面获取的所有数据.通常情况下 item称为监控项,例如我们host加入了 zabbix 监控,我们需要监控它的内存.CPU信息,那么获取的CPU或内存 ...

  8. 运算符、单双分支&多分支、while循环

    一 .运算符: 1. 算术运算符: " + "." - " ." * " ." / " 分别为加.减.乘.除. % 是& ...

  9. hdu 6191--Query on A Tree（持久化字典树）

    题目链接 Problem Description Monkey A lives on a tree, he always plays on this tree. One day, monkey A l ...

  10. 树和二叉树的存储结构的实现(C/C++实现)

    存档: #include <iostream.h> #include <stdio.h> #include <stdlib.h> #define max 20 ty ...