收藏一个简单实用的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. HDOJ(HDU) 2139 Calculate the formula(水题，又一个用JavaAC不了的题目)

    Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) 看到这个时间,我懵逼了... 果然,J ...

  2. sublime text3安装SublimeREPL--解决不能运行input()的问题

    原文地址:http://blog.chinaunix.net/uid-12014716-id-4269991.html 一.安装包管理器(如果已经安装可以忽略) 1.简单的安装方法:使用Ctrl+`快 ...

  3. poj2255

    题目大意: 树恢复??树复原?? 小Valentine非常喜欢玩二叉树的游戏,他非常喜欢在二叉树的树根上随机的写上一下大写字母,这是她创造的一个例子: D / \ / \ B E / \ \ / \ ...

  4. 怎么用copy关键字

    出题者简介: 孙源(sunnyxx),目前就职于百度 整理者简介:陈奕龙,目前就职于滴滴出行. 转载者:豆电雨(starain)微信:doudianyu 用途: NSString.NSArray.NS ...

  5. sql第一课笔记

    这是我看了imooc的视频教程之后重新写的笔记. 虽然之前也是学习过SQL Server数据库,但是也是忘记得差不多了.现在重新捡起来,安装一次数据库练习,使用的是mysql. 第一课是最简单的创建, ...

  6. 提升ReSharper和Visual Studio的性能

    转载 作者:赵青青        出处:http://www.cnblogs.com/zhaoqingqing/ 文章目录[点击展开](?)[+]   提升性能 我们不断地确保ReSharper的正常 ...

  7. scrollview中停止滚动的监听

    [补充]可以在主线程控制,特别注意 scrollView3.postDelayed(new Runnable() { @Override public void run() { scrollView3 ...

  8. Java 实现字符串反转

    方法一: public class StringReverse { public void swap(char[] arr, int begin, int end) { while(begin < ...

  9. [Javascrip] Logging Timing Data to the Console

    Learn to use console.time with console.timeEnd to get accurate timings of operations in javascript. ...

  10. jquery自定义插件来实现分页的效果

    本节将介绍如何定义自己的jquery插入,实现分页效果,话不多说,.看看达到的效果: 分页插件 实现的代码例如以下: <!DOCTYPE HTML PUBLIC "-//W3C//DT ...