<!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. Linux GCC常用命令学习

    1简介 GCC 的意思也只是 GNU C Compiler 而已.经过了这么多年的发展,GCC 已经不仅仅能支持 C 语言:它现在还支持 Ada 语言.C++ 语言.Java 语言.Objective ...

  2. HDU acm1028 整数划分 递归问题（递推）

    我们用递归+记忆化的方法来解决普通整数划分问题:定义 f(n,m)为将整数n划分为一系列整数之和,其中加数 最大不超过m. 得到下面的递推关系式: 当n==1 || m==1 只有一种划分,即 1 或 ...

  3. android 怎么实现跑马灯效果

    自定义控件 FocusedTextView, 使android系统误以为它拥有焦点 public class FocusedTextView extends TextView { public Foc ...

  4. ceph部署与问题

    一.基本情况:物理设备:4台惠普dl360,4个千兆网卡 4个1T盘操作系统统一为:CentOS 7.2.1511ceph版本:10.2.3ceph-deploy版本:1.5.36网络情况:192.1 ...

  5. World is Exploding

    题意: 给出一个长为n的序列A,问有多少四元组(a, b, c, d)满足$a \ne b \ne c \ne d, 1 \leq a < b \leq n, 1 \leq c < d \ ...

  6. java集合框架之Collection

    参考http://how2j.cn/k/collection/collection-collection/366.html Collection是 Set List Queue和 Deque的接口Qu ...

  7. Winform禁止程序多开 &&禁止多开且第二次激活第一次窗口

    一.禁止多开问题,运用Mutex锁 在Program.cs中运用Mutex锁 bool createNew;using (System.Threading.Mutex mutex = new Syst ...

  8. E20180506-hm

    更新: 2019/02/19 原来忘记分类,把此博文归入单词类 criterion n. 规范; (批评.判断等的) 标准,准则; criteria  n. (批评.判断等的) 标准,准则( crit ...

  9. HDU3415【单调队列】

    单调队列解决通过维护满足条件内的值,并保证队列里的值单调,解决一个最大最小. 让你求一个k区间长度的最大值,那么就只要搞下前缀和, sum[ i , j ] 区间的和:sum[ j ]-sum[ i ...

  10. 2016CCPC东北地区大学生程序设计竞赛

    吧啦啦啦啦啦啦啦啦啦啦啦能量,ACM,跨!变身!变成一个智障! http://blog.csdn.net/keyboarderqq/article/details/52743062