<!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. object_test.py

    #方法,属性,私有化加双下划线 ''' __a 从外部无法访问,但是类的内部可以访问.实际上还是能在类外访问这些私有方法,尽管不应该这么做:s._A__a 如果不需要使用这种方法但是又不行让其他对象不 ...

  2. BZOJ_3231_[Sdoi2008]递归数列_矩阵乘法

    BZOJ_3231_[Sdoi2008]递归数列_矩阵乘法 Description 一个由自然数组成的数列按下式定义: 对于i <= k:ai = bi 对于i > k: ai = c1a ...

  3. codevs 3269 混合背包（复习混合背包）

    传送门 [题目大意]给出物品的数量.-1为无限个. [思路]混合背包.... [code] #include<iostream> #include<cstdio> #inclu ...

  4. Linux线程退出、资源回收、资源清理的方法

    首先说明线程中要回收哪些资源,理解清楚了这点之后在思考资源回收的问题. 1.子线程创建时从父线程copy出来的栈内存; 线程退出有多种方式,如return,pthread_exit,pthread_c ...

  5. MTK UART串口调试

    一.UART初始化 1. kernel-3.18/drivers/misc/mediatek/uart/uart.c static int __init mtk_uart_init(void) { ; ...

  6. MongoDB分析工具之三：db.currentOp()

    db.currentOp() db.currentOp是个好东西,顾名思义,就是当前的操作.在mongodb中可以查看当前数据库上此刻的操作语句信息,包括insert/query/update/rem ...

  7. C# 计算时间日期

    System.DateTime datetime = System.DateTime.Now.AddSeconds(fixtime); // fixtime 是往后的秒数 : datetime是现在时 ...

  8. python模块datetime

    1. 日期输出格式化 datetime => string import datetime now = datetime.datetime.now() now.strftime('%Y-%m-% ...

  9. 【eclipse插件开发实战】Eclipse插件开发1——eclipse内核结构、扩展点机制

    Eclipse插件开发实战1--eclipse内核结构.扩展点机制 一.前言 本系列总体介绍eclipse插件开发基本理论.插件项目结构及开发步骤,最后再给出两个插件开发实例. 总体安排结构如下: 1 ...

  10. APOSE.Cell导入图片

    一:读取EXcel单元格图片 1:读取全部单元格的图片集合  worksheet.pictureCollotion 2:遍历pictureCollotion    (foreach (var  pic ...