1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
    <title>jQuery弹出层 模态框</title>
    <script src="./jquery.min.js" type="text/javascript"></script>
    <style>
        .btn{
            height:100px;
        }
        .black_over{
            display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            
            z-index:1001;
            top: 0;
            left: 0;
            right: 0;
            left: 0;
            margin: auto;
            
        }
        .white_content {
            display: none;
            position: fixed;
            z-index:1002;
            overflow: auto;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //弹出隐藏层
            function ShowDiv(show_div,bg_div){
                document.getElementById(show_div).style.display='block';
                document.getElementById(bg_div).style.display='block' ;
 
                var _windowHeight = $(window).height(),//获取当前窗口高度
                        _windowWidth = $(window).width(),//获取当前窗口宽度
                        _popupHeight = $("#"+show_div).height(),//获取弹出层高度
                        _popupWeight = $("#"+show_div).width();//获取弹出层宽度
                _posiTop = (_windowHeight - _popupHeight)/2;
                _posiLeft = (_windowWidth - _popupWeight)/2;
                $("#"+show_div).css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position
            };
            //关闭弹出层
            function CloseDiv(show_div,bg_div)
            {
                document.getElementById(show_div).style.display='none';
                document.getElementById(bg_div).style.display='none';
            };
 
            $(".btn").click(function () {
                var src = $(this).attr("src");
                $("#showcont").attr("src",src);
                ShowDiv('MyDiv','fade')
            });
            $("#fade").click(function () {
                CloseDiv('MyDiv','fade')
            });
        });
 
    </script>
</head>
<body>
<!--<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />-->
<!--图片请换成自己的，点击图片弹出-->
<img src="tu.png" alt="sd" class="btn" >
<img src="pic.jpg" alt="sd" class="btn" >
<!--弹出层时背景层DIV-->
<div id="fade" class="black_over">
</div>
<!--弹出层的内容-->
 
<div id="MyDiv" class="white_content">
 
<img src="tu.png" alt="" id="showcont">
</div>
</body>
 
</html>

　　

jQuery点击弹出层，弹出模态框，点击模态框消失的更多相关文章

  1. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  2. html 通用 遮罩弹出层 弹出后 支持跳转页面

    //showMessage 提示的内容默认为空必填 buttonText:按钮显示的内容默认为"确定" 传入 "" 为默认 url:跳转链接 传入"& ...

  3. jQuery点击自身以外地方关闭弹出层

    转载自:http://blog.163.com/abkiss@126/blog/static/325941002012111754349590/ 主要功能是点击显示,然后通过点击页面的任意位置都能关闭 ...

  4. 用jQuery解决弹出层的问题

    在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...

  5. Jquery实现弹出层效果

    <script type="text/javascript"> $(document).ready(function(){ $('.one').click(functi ...

  6. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  7. js的事件冒泡和点击其他区域隐藏弹出层

    一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...

  8. 【position也可以很复杂】当弹出层遇上了鼠标定位（下）

    前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...

  9. 【position也可以很复杂】当弹出层遇上了鼠标定位（上）

    前言 周五时同事有一个关于弹出层的问题没有解决,但是面临下班问题,我有点不舒服,便叫回去周六过来解决,但是上周六病了,所以请了个假,于是故事发生啦.... 今天上班时候,组员们卡到了那个地方,然后结果 ...

  10. 使用Jq实现弹出层

    对于前端程序员来说,弹出层是经常用到的,下面我叫大家如何用实现JQuery实现弹出层的效果,代码如下: CSS:弹出层的效果 .mask { position: absolute; top: 0px; ...

随机推荐

  1. [深入学习C#]C#实现多线程的方式：使用Parallel类

    简介 在C#中实现多线程的另一个方式是使用Parallel类.  在.NET4中 ,另一个新增的抽象线程是Parallel类 .这个类定义了并行的for和foreach的 静态方法.在为 for和 f ...

  2. 201621123014《JAVA程序设计》第1周学习总结

    1. 本章学习总结 关键字:JAVA特点.JDK.JVM.JRE.class.编译工具.JDK是JAVA的开发工具包,拥有JAVA需要的环境和各类JAVA工具,是JAVA的核心:JVM是JAVA虚拟机 ...

  3. JVM的性能跳优

    首先需要找到需要进行调优的进程. 通过jps -v -l -m 找到我需要调优的进程 其中, -m表示输出传入main方法的参数, -l表示输出的main类或jar包的名字, -v表示传入JVM的参数 ...

  4. 2017-2018-1 20179203 《Linux内核原理与分析》第八周作业

    攥写人:李鹏举 学号:20179203 ( 原创作品转载请注明出处) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163.com/course/US ...

  5. ASP.NET AJAX(Atlas)和Anthem.NET——管中窥豹般小小比较

    Anthem.NET近日有朋友和我提到Anthem.NET这个同样基于ASP.NET的Ajax框架,今天有机会亲自尝试了一下.初步的感觉似乎和ASP.NET AJAX不相上下,甚至某些地方要强于ASP ...

  6. 使用IronPython集成Python和.NET

    本文由 伯乐在线 - 艾凌风 翻译,Daetalus 校稿.未经许可,禁止转载!英文出处:www.informit.com.欢迎加入翻译组. 从两个优秀的世界各取所需,更高效的复用代码.想想就醉了,. ...

  7. netty支持的协议

    流经网络的数据总是具有相同的类型:字节.这些字节是如何流动的主要取决于我们所说的 网络传输--一个帮助我们抽象底层数据传输机制的概念.用户并不关心这些细节:他们只想确保他们的字节被可靠地发送和接收. ...

  8. bzoj2118

    最短路 很早以前做的了 数据范围太大,不能直接算 mn=min(a[i]) 算出d[i]表示sum%mn=i最小能构成的数,这个用最短路就行了,然后计算d[i],d[i]+mn的个数统计答案 #inc ...

  9. T-SQL操作XML 数据类型方法 "modify" 的参数 1 必须是字符串文字。

    ----删除关键字的同时也清理AP表中所有关联这个ID的数据 create trigger Trg_UpdateAppWordOnDelKeyWord on [dbo].[tbl_KeyWord] f ...

  10. Zabbix_proxy的架设

    一.安装zabbix-proxy与导入数据库 1. 安装 zabbix-server $ sudo rpm -ivh http://repo.zabbix.com/zabbix/3.0/rhel/7/ ...