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. windows 里面waveOut*接口应用

    #include <windows.h>#include <mmsystem.h>#include <stdio.h>/** some good values fo ...

  2. Java微信开发_00_资源汇总贴

    1.微信公众平台技术文档(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432) 2.微信企业号开发接口文档(ht ...

  3. BurpSuite工具应用及重放攻击实验

    一.BurpSuite工具介绍 BurpSuite是用于攻击web 应用程序的集成平台.它包含了许多工具,并为这些工具设计了许多接口,以促进加快攻击应用程序的过程.所有的工具都共享一个能处理并显示HT ...

  4. [转]七个对我最好的职业建议（精简版）--Nicholas C. Zakas

    一.不要别人点什么,就做什么 我的第一份工作,只干了8个月,那家公司就倒闭了.我问经理,接下来我该怎么办,他说: "小伙子,千万不要当一个被人点菜的厨师,别人点什么,你就烧什么.不要接受那样 ...

  5. HDU1257(简单DP)

    最少拦截系统 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  6. MongoDB优化之三：如何排查MongoDB CPU利用率高的问题

    遇到这个问题,99.9999% 的可能性是「用户使用上不合理导致」,本文主要介绍从应用的角度如何排查 MongoDB CPU 利用率高的问题. Step1: 分析数据库正在执行的请求 用户可以通过 M ...

  7. [jQuery] 按回车键实现登录

    Jquery按回车键提交实现登录的方式分为两种: 1.按钮提交 2.表单提交 1.按钮提交 $("#LoginIn").off('click').on('click', funct ...

  8. USB插拔检测程序

    一.手动添加ON_WM_DEVICECHANGE()消息 二.添加头文件#include <Dbt.h> 三.定义设备的GUID static const GUID GUID_DEVINT ...

  9. Asp.net 实现只能允许一个账号同时只能在一个地方登录

    先上帮助类: /// <summary> /// 单点登录帮助类 /// </summary> public class SSOHelper { /// <summary ...

  10. Centos6.5安装JDK8教程(一)

    [原] 转载请注明原文地址, 保持对知识基本尊重,谢谢!   Win7宿主系统 VmWareWorkstation 11应用下的 Centos6.5系统.   /******************* ...