<!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. BZOJ_3545_[ONTAK2010]Peaks_主席树+倍增+kruscal重构树+dfs序

    BZOJ_3545_[ONTAK2010]Peaks_主席树+倍增+kruscal重构树 Description 在Bytemountains有N座山峰,每座山峰有他的高度h_i.有些山峰之间有双向道 ...

  2. Map容器线程安全问题

    一.HashMap在非线程安全的环境下使用会出现什么样的问题? public class HashMapMultiThread { static Map<String,String> ma ...

  3. 升级python之后yum不可用

    #修改yum文件 vi /usr/bin/yum 将文件头部的 #!/usr/bin/python 改为默认的python文件,例如 #!/usr/bin/python2.7.3 整个过程完成了. 同 ...

  4. ajax展示新页面同时传递参数

    HTML页面部分代码: <div id="course" hidden></div> HTML页面中ajax代码: var selectType=$(&qu ...

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

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

  6. unity3d项目文件目录发布后，对应的ios/android应用目录

    Unity3d的Resource.AssetBundle与手游动态更新的报告,在这里分享一下,希望能够对各位用Unity的朋友有些许帮助.目录:1.Unity的资源数据加载2.Resource.Str ...

  7. 五分钟了解Mecanim角色动画系统

    http://www.narkii.com/club/thread-305414-1.html Unity 4.0推出的Mecanim动画系统已经有一段时间,不过据了解很多的朋友仍然在使用原来的角色动 ...

  8. 洛谷P2480 [SDOI2010]古代猪文（卢卡斯定理+中国剩余定理）

    传送门 好吧我数学差的好像不是一点半点…… 题目求的是$G^{\sum_{d|n}C^d_n}mod\ 999911659$ 我们可以利用费马小定理$a^{k}\equiv a^{k\ mod\ (p ...

  9. 洛谷P4301 [CQOI2013]新Nim游戏（线性基）

    传送门 不知道线性基是什么东西的可以看看蒟蒻的总结 后手在什么时候能够获胜呢?只有在他能构造出一个子集的异或和为0时(这个应该是nim博弈的结论了吧) 那么为了必胜,我们就要取到没有子集异或和为0为止 ...

  10. python 函数 之 用户注册register()

    db_path='db.txt' #定义默认文件路径,方便修改def get_uname(): while True: uname=input('请输入用户名:').strip() if uname. ...