<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="JS/JavaScript/jquery-1.7.2.min.js"></script>

    <style type="text/css">

        .Calculator_box-opened {

            width: 100%;

            height: 100%;

            position: fixed;

            top: 0px;

            left: 0px;

            overflow-y: visible;

            display: none;

            background-color: #000;

            opacity: 0.8;

            filter: alpha(Opacity=80, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100);

            z-index: 1099;

        }

        .Calculator_box {

            padding: 0px;

            width: 520px;

            margin: 100px auto;

            text-align:center;

            background-color: #FFF;

            position: relative;

        }

    </style>

    <script type="text/javascript">

        $(document).ready(function () {

            var speed = 600;//动画速度

            $("#dj").click(function (event) {//绑定事件处理

                event.stopPropagation();

                $("#Calculator").show(speed);//动画显示

            });

            //单击除空白区域外的空白区域就隐藏

            $(document).click(function () {

                if (!$(event.srcElement).is(".Calculator_box,.Calculator_box *")) {

                    $("#Calculator").hide(speed);

                }

            });

        });

    </script>

</head>

<body>

    <input type="button" value="点击我弹出层吧" id="dj" />

    <div class="Calculator_box-opened" id="Calculator">

        <div class="Calculator_box">

             <span style="color:red; font-size:16px">大家好，我是弹出层哟！</span>

        </div>

    </div>

</body>

</html>

　　简单示例比较容易懂！

根据juery CSS点击一个标签弹出一个遮罩层的简单示例的更多相关文章

  1. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  2. jquery弹出关闭遮罩层实例

    jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...

  3. 从点击Button到弹出一个MessageBox， 背后发生了什么

    思考一个最简单的程序行为:我们的Dialog上有一个Button, 当用户用鼠标点击这个Button时, 我们弹出一个MessageBox. 这个看似简单的行为, 谁能说清楚它是如何运行起来的,背后究 ...

  4. 从点击Button到弹出一个MessageBox， 背后发生了什么（每个UI线程都有一个ThreadInfo结构， 里面包含4个队列和一些标志位）

    思考一个最简单的程序行为:我们的Dialog上有一个Button, 当用户用鼠标点击这个Button时, 我们弹出一个MessageBox.   这个看似简单的行为, 谁能说清楚它是如何运行起来的,背 ...

  5. js实现点击<li>标签弹出其索引值

    据说这是一道笔试题,以下是代码,没什么要文字叙述的,就是点击哪个<li>弹出哪个<li>的索引值即可: <html> <head> <style& ...

  6. js实现弹出窗口+遮罩层+tab切换

    [功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...

  7. jQuery点击图片弹出大图遮罩层

    使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...

  8. ionic3 点击输入 框弹出白色遮罩 并把 界面顶到上面

    这个蛋疼 问题 ,在android 上面遇到这种情况 ,键盘弹出的时候 总有一个白色的遮罩在后面出现,网上查了很久都没发现原因. 偶然发现一个方法 ,试下了下 问题解决了. 代码如下: IonicMo ...

  9. jQuery弹出关闭遮罩层

    效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

随机推荐

  1. CSS中浏览器开发商特定的CSS属性

    浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...

  2. 转王波洋，SQL语句中的 for XML Path('')

    FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...

  3. [软件工程] 查找二维数组最大子数组的之和 郭莉莉&李亚文

    一. 在主函数中实现二维数组的输入. 代码主要函数maxson(),主要利用for()循环先查找出最大字数组的四角的坐标xmin,xmax,ymin,ymax来确定最大子数组, 在循环中算出之和,编写 ...

  4. linux下安装kears

    2. 安装python基础开发包 # 系统升级 sudo apt update sudo apt upgrade sudo apt install -y python-dev python-pip p ...

  5. robot framework 安装配置

    robot framework 是一款专门用作自动化测试的框架,提供了丰富的内置库,与第三方库,也支持用户自己编写的库,robot framework +library 可以 用来做ui的自动化测试, ...

  6. Java中的值传递和引用传递

    这几天一直再纠结这个问题,今天看了这篇文章有点思路了,这跟C++里函数参数为引用.指针还是有很大区别. 当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里 ...

  7. hbase scan 的例子

    /** * Created by han on 2016/1/28. */ import org.apache.hadoop.conf.Configuration; import org.apache ...

  8. spring mvc 4.3.2 + mybatis 3.4.1 + mysql 5.7.14 +shiro 幼儿园收费系统 之 消息管理

  9. MyBatis复习【简单配置CRUD】

    这里的案例集成了log4j的日志框架,项目架构: 用到的jar文件 添加配置文件:mybatis-config.xml  和dao层配置文件StudentDao.xml 这里书写了个简单的案例仅为了说 ...

  10. Java 字符串拼接 五种方法的性能比较分析 从执行100次到90万次

    [请尊重原创版权,如需引用,请注明来源及地址] > 字符串拼接一般使用“+”,但是“+”不能满足大批量数据的处理,Java中有以下五种方法处理字符串拼接,各有优缺点,程序开发应选择合适的方法实现 ...