收藏一个简单实用的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. 【动态规划】Vijos P1616 迎接仪式

    题目链接: https://vijos.org/p/1616 题目大意: 长度为N的字符串,只含‘j’和‘z’,可以将任意两个字符调换K次,求能够拥有的最多的'jz'串. 题目思路: [动态规划] 首 ...

  2. Profile GPU rendering

    自Android 4.1引入了“Profile GPU rendering”这个开发工具以帮助分析应用程序性能并并精确定位渲染问题,Android 4.3增加了可视效果:On screen as ba ...

  3. O - Extended Traffic（判断负环）

    题意:有n个城市,每一个城市有一个拥挤度ai,从一个城市I到另一个城市J的时间为:(aJ-aI)^3,存在负环.问从第一个城市到达第k个城市所话的时间,如果不能到达,或者时间小于3输出?否则输出所花的 ...

  4. Let it Bead

    http://poj.org/problem?id=2409 // File Name: poj2409.cpp // Author: bo_jwolf // Created Time: 2013年1 ...

  5. Java调用R（一）_Rserve

    最近做项目涉及到R总结一些Java本地调用R和Java web项目中调用R的基本步骤 1.  R中安装Rserve包 2.  系统变量Path加上 C:\Program Files\R\R-3.0.1 ...

  6. session与cookie的关系

    客户第一次发送请求给服务器,此时服务器产生一个唯一的sessionID,并返回给客户端(通过cookie),此时的cookie并没有setMaxAge();只是保存于客户端的内存中,并与一个浏览器窗口 ...

  7. 【转】JavaScript对Json节点的增删改

    var json = { "age":24, "name":"cst" }; //修改Json中的age值,因为Json中存在age属性 j ...

  8. Spring Boot 启动原理分析

    https://yq.aliyun.com/articles/6056 转 在spring boot里,很吸引人的一个特性是可以直接把应用打包成为一个jar/war,然后这个jar/war是可以直接启 ...

  9. Mongodb快速入门之使用Java操作Mongodb

    [IT168 专稿]在上一篇文章中,我们学习了Mongodb的安装和初步使用,在本文中,将学习如何使用Java去编程实现对Mongodb的操作. HelloWorld程序 学习任何程序的第一步,都是编 ...

  10. Eclipse导入Gradle时报错：SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable

    百度查到http://stackoverflow.com/questions/19794200/gradle-android-and-the-android-home-sdk-location 按照其 ...