收藏一个简单实用的JS弹框，通过隐藏和显示div来实现，代码来自脚本之家！

<html>

    <head>

        <title>

            LIGHTBOX EXAMPLE

        </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: 16px; border: 16px solid orange; background-color: white; z-index:1002;

            overflow: auto; }

        </style>

    </head>

    <body>

        <p>

            可以根据自己要求修改css样式

            <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">

                点击这里打开窗口

            </a>

        </p>

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

            This is the lightbox content.

            <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">

                Close

            </a>

        </div>

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

        </div>

    </body>

</html>

Js仿弹框的更多相关文章

  1. js实现弹框及自动关闭

    <SCRIPT LANGUAGE="javascript"> < !-- window.open (''page.html'',''newwindow'',''h ...

  2. js 简单弹框toast

    新建toast.js文件 function Toast(msg,duration){ duration=isNaN(duration)?3000:duration; var m = document. ...

  3. JS 功能弹框封装

    // 功能提示弹框 function messageBox ( option ) { var html = ''; html += '<div class="message-box-h ...

  4. js创建弹框（提示框，待确认框）

    ;;} html,body{text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-user-select:none;} a{color ...

  5. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  6. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  7. js弹框3秒后自动消失

    开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...

  8. js弹框处理

    # -*- coding:utf-8 -*- """ js弹框处理 """ from selenium import webdriver d ...

  9. SilverLight 页面后台方法XX.xaml.cs 创建JS,调用JS ，弹出提示框

    1.Invoke和InvokeSelf [c-sharp] view plaincopy public partial class CreateJSDemo : UserControl { publi ...

随机推荐

  1. 【贪心】【模拟】HDU 5491 The Next (2015 ACM/ICPC Asia Regional Hefei Online)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5491 题目大意: 一个数D(0<=D<231),求比D大的第一个满足:二进制下1个个数在 ...

  2. 【模拟】Codeforces 699A Launch of Collider

    题目链接: http://codeforces.com/problemset/problem/699/A 题目大意: 给N个点,向左或向右运动,速度均为1,问最早什么时候有两个点相撞.无解输出-1 题 ...

  3. C++中delete和 delete[]的区别

    总的原则是,如果是用new[]创建的,则用delete[]删除,如果是用new创建的,则用delete删除. 对于基本类型,比如char *p=new char[20];如果删除时,delete p和 ...

  4. [Audio processing] wav音频文件读取int和double数组的关系

    直接读取wav文件是int数组,但是有一些实现返回的是double数组,还有些输入是double数组:那我们要互相调用的时候还是要看看两者到底有什么关系,其实很简单. 以单身道,16bit为例 /** ...

  5. POJ 2912 Rochambeau

    题意:有一些人玩石头剪刀布,其中有一个人(称其为裁判)可以出“石头”,“剪刀”,“布”中的任意一个,其他人永远只能出相同的一个.即有的人只能出剪刀,有的人只能出石头,有的人只能出布.进行了多次对决,每 ...

  6. 【递推】地铁重组(subway) 解题报告

    问题来源 BYVoid魔兽世界模拟赛 [问题描述] 蒙提在暴风城与铁炉堡之间的地铁站中工作了许多年,除了每天抓一些矿道老鼠外,没有其他的变化.然而最近地铁站终于要扩建了,因为侏儒们攻克了建设长距离穿海 ...

  7. zoj 2706 线段树

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1706 trick:关于正数和负数的整除问题,正数整除是自动向下取整的 ...

  8. Spring与Hibernate集成中的Session问题

    主要讨论Spring与Hibernate集成中的session问题 1．通过getSession()方法获得session进行操作 public class Test extends Hibernat ...

  9. JavaScript使用需要注意的细节

    1.JavaScript区分大小写 在JavaScript中对象,变量.函数都是区分大小写的,例如: Object表示对象,Arrary表示数组,而写成object,arrary的时候JavaScri ...

  10. evernote出现"Invalid username and/or password"的情况

    evernote出现"Invalid username and/or password"的情况 evernote挺好用的,可是这几年用下来也遇到过狗血情况,几乎每次都是更新后出状况 ...