<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="renderer" content="webkit">

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>浮动窗口</title>

<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: 25%;

    left: 25%;

    width: 50%;

    height: 50%;

    padding: 0;

    border: 1px solid orange;

    background-color: white;

    z-index: 1002;

    overflow: auto;

}

</style>

<script>

function openWin(){

        document.getElementById('light').style.display='block';

        document.getElementById('fade').style.display='block'

}

function closeWin(){

    document.getElementById('light').style.display='none';

    document.getElementById('fade').style.display='none'

}

</script>

</head>

<body>

<p><a href="javascript:void(0)" onclick="openWin()">点击这里打开窗口</a></p>

<div id="light" class="white_content">

            这里是窗口内容

            <a href="javascript:void(0)" onclick="closeWin()"> Close</a>

 </div>

<div id="fade" class="black_overlay"></div>

</body>

</html>

极简的css浮动窗口的更多相关文章

  1. HTML5 极简的JS函数

    页面初始化 mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面.关闭 ...

  2. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  3. (转)JS浮动窗口（随浏览器滚动而滚动）

    原文:http://hi.baidu.com/aiyayaztt/item/4201c55a6b729dced2e10c79 JS浮动窗口(随浏览器滚动而滚动) 往往用于一些联系方式,互动平台模块,随 ...

  4. Jquery 类似新浪微博，鼠标移到头像，用浮动窗口显示用户信息，已做成一个jquery插件

    请注意!!!!! 该插件demo PHP 的 demo下载  C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...

  5. CSS浮动专题!

    在css中,浮动问题可能是很多刚入门的小白比较头疼的问题. 1,首先先来介绍一下两种浮动类型:左浮动和右浮动 1) float:left;左浮动,后面的内容会流向对象的右侧 2) float:righ ...

  6. RELabel ： 一个极简的正则表达式匹配和展示框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  7. 极极极极极简的的增删查改（CRUD）解决方案

    去年这个时候写过一篇全自动数据表格的文章http://www.cnblogs.com/liuyh/p/5747331.html.文章对自己写的一个js组件做了个概述,很多人把它当作了一款功能相似的纯前 ...

  8. Spring Boot（5）一个极简且完整的后台框架

    https://blog.csdn.net/daleiwang/article/details/75007588 Spring Boot(5)一个极简且完整的后台框架 2017年07月12日 11:3 ...

  9. CentOS安装使用.netcore极简教程（免费提供学习服务器）

    本文目标是指引从未使用过Linux的.Neter,如何在CentOS7上安装.Net Core环境,以及部署.Net Core应用. 仅针对CentOS,其它Linux系统类似,命令环节稍加调整: 需 ...

随机推荐

  1. codeforces 701C C. They Are Everywhere(尺取法)

    题目链接: C. They Are Everywhere time limit per test 2 seconds   memory limit per test 256 megabytes inp ...

  2. 七号信令中TUP协议的主要消息和故障问题

      CIC码说明: TUP消息的路由标记: 为OPC 24位 DPC24位 CIC 12位,12位CIC 的低5为时隙号,其中后4位为SLC,高7位为系统号.     CIC配置需要注意几个问题:   ...

  3. myeclipse_JUnit导包问题

    第一种方式: MyEclipse创建JUnit单元测试时,在需要测试的代码段前键入“@Test”时,按ctrl和1一般会自动提示JUnit需要导包,但有时会无法提示这个建议,如图所示.该经验教你如何解 ...

  4. Java创建对象解释

    创建对象包括两个步骤,首先为对象声明,然后为对象分配内存. (1)对象声明 格式:类名 对象名: 这里只是声明了对象,但该对象并不能够使用,原因为未分配内存空间. (2)为对象分配内存 格式:new ...

  5. 深度学习之softmax回归

    前言            以下内容是个人学习之后的感悟,转载请注明出处~ softmax回归 首先,我们看一下sigmod激活函数,如下图,它经常用于逻辑回归,将一个real value映射到(0, ...

  6. Visual Studio Ultimate 2013 下载地址

    VS2013_RTM_ULT_CHS.iso 文件大小:2.87G 百度网盘下载地址: http://pan.baidu.com/s/1bn4gavX 微软官网下载地址: http://downloa ...

  7. sqlServer：convert()函数

    在oracle中对于时间格式的转换用到的比较多,相对也比较了解,现在换了新的项目组,使用sqlserver数据库,需要对这个数据库的一些常用函数进行重新学习和熟悉,现在根据w3c及网上博文对conve ...

  8. 【Hadoop】MapReduce笔记（一）：MapReduce作业运行过程、任务执行

    一.MR作业运行过程 JobClient的runJob()方法:新建JobClient实例,并调用其submitJob()方法.提交作业后,runJob()每秒轮询作业进度,如果发现上次上报后信息有改 ...

  9. Flutter实战视频-移动电商-14.首页_url_launcher一键拨打店长电话

    14.首页_url_launcher一键拨打店长电话 首页拨打电话的功能. 接收连个值,一个是店长的头像,一个是电话号码, 然后开始写我们的build方法.点击图片的时候要有一个拨打电话的动作.我们要 ...

  10. Laravel中的模板引擎Blade

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