收藏一个简单实用的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. C#调用Exe文件的方法及如何判断程序调用的exe已结束

    很简单的代码就可以实现C#调用EXE文件,如下: 引入using System.Diagnostics; 调用代码: Process.Start(exe文件名); 或直接 System.Diagnos ...

  2. Mysql学生管理系统：表的建立，外键一对多，多对多关系，中间关联表的建立

    学生管理系统 管理员注册/登录/注销 注册班级(班级详细信息) 注册学生信息 查看班级信息/查看老师资料 教师注册/注销  查看教师资料  查看学生资料  根据名称/班级/ 查看学生详细信息--支持模 ...

  3. 安装Wamp后 Apache无法启动的解决方法

    安装Wamp后 Apache无法启动的解决方法,网上的解决方案可以说是五花八门,有些说了一大推,一点作用都起不到. 其实解决方法只需两步: 1.安装路径不能包含有中文,这个我不知道为什么,总之如果安装 ...

  4. ubuntu下安装svn

    Ubuntu下使用SVN SVN作为日常开发中不可缺少的工具,今天终于开始在Ubuntu下使用了. 1.首先需要安装SVN.Ubuntu下的SVN安装十分简单,sudo apt-get install ...

  5. ubuntu开机黑屏

    以下皆在VM虚拟机下 (1)ctr+alt+f4 进入命令行 (2) sudo apt-get update sudo apt-get install xserver-xorg-lts-quantal ...

  6. 使用HTML5 WebDataBase设计离线数据库

    基于HTML5的Web DataBase 可以让你在浏览器中进行数据持久地存储管理和有效查询,假设你的离线应用程序有需要规范化的存储功能,那么使用Web DataBase,可以使你的应用程序无论是在离 ...

  7. Android ActionBar（转）

    本文内容 关于 ActionBar 必要条件 项目结构 环境 演示一:Action Bar 显示隐藏 演示二:Action Item 显示菜单选项 演示三:Action Home 启用“返回/向上”程 ...

  8. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. php include 与 require 起底[转]

    转自 http://www.guangla.com/post/2014-01-24/40060857811 起因: 一朋友面试被问到,php的include和require的区别,这个可能是面试中出现 ...

  10. 在Linux上怎么安装和配置Apache Samza

    samza是一个分布式的流式数据处理框架(streaming processing),它是基于Kafka消息队列来实现类实时的流式数据处理的.(准确的说,samza是通过模块化的形式来使用kafka的 ...