<!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. Java笔记（十）

    正则表达式: 符合一定规则的表达式,用于专门操作字符串. 对QQ号码进行校验,要求:5-11位,0不能开头,只能是数字. public class Demo{ public static void m ...

  2. ubuntu16.04 + cuda9.0（deb版）+Cudnn7.1

    https://blog.csdn.net/Umi_you/article/details/80268983

  3. （Android）截图批处理

    新建一个批处理文件 输入下面的内容 @echo off rem set name=%,%%,%%,%%,%%,%%,% //设置截图文件名称 set screenShotName=%,%%,%%,% ...

  4. 快速打开和关闭SQL服务

    将下面文本复制到txt中,然后将文本文件另存为bat @echo off for /f "skip=3 tokens=4" %%i in ('sc query MSSQLSERVE ...

  5. D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图

    本章使用路径生成器来绘制一个折线图.以中国和日本的GDP数据为例:   //数据 var dataList = [ { coountry : "china", gdp : [ [2 ...

  6. HDU2846【字典树】

    题意: 百度. 思路: 一个串的插入只能搞出这个串的前缀,然而对于要query的串是子串,所以插入的时候暴力插入所有字母开头的串.... 然后还要注意到自己的串本身会叠加字典树中的前缀,要标记掉. # ...

  7. Lightoj1083【单调栈】

    #include <cstdio> #include <stack> #include <iostream> #include <string.h> # ...

  8. HDU3555【数位DP】

    入门...还在学习中,先贴一发大牛博客 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3555 题目大意: 给一个数字n,范围在1~2^63-1,求1~ ...

  9. HDU1597【二分瞎搞】

    题意: 求第n个数: 思路: 可以看到一种序列: 1 12 123 1234 12345 123456 1234567 12345678 123456789 1234567891 1234567891 ...

  10. laravel 布局 详解（实例）

    在resources/views里创建layouts,并在layouts里创建app.blade.php, 这个php文件放的就是你的页面框架,也就是多页面公用的内容,如下 <!DOCTYPE ...