效果:

初始状态时滚动条是可以滚动的

弹出层出现之后:1、弹窗始终居于整个窗口的中间 2、滚动条不可滚动

实现代码:

HTML代码:

<div class="container">
  <input type="button" value="点击" class="btn1">
  <div class="overlay"></div>
  <div class="mask">
    <a href="javascript:;" class="close">×</a>
  </div>
</div>

CSS代码:

.container{width:1000px; height: 1200px; border: 1px solid #F00; position: relative; margin: 0 auto;}
.btn1{width:100px; height: 40px; font-size: 20px; position: absolute;; left: 450px; bottom: 10px;}
.overlay{width:100%; height: 100%; position: fixed; left: 0; right: 0; top: 0; background: #000; opacity: 0.8; z-index: 1; display: none;}
.mask{width: 500px; height: 400px; background: #09F; position: absolute; left: 250px; z-index: 2; display: none;}
.close{width:50px; height: 50px; line-height: 50px; text-align: center; font-size: 30px; position: absolute;; top: 0; right: 0; color:#FFF; text-decoration:none;}

js代码:

<script src="jquery-1.9.1.min.js"></script>

<script>
$(function(){

  //出现弹窗
  $('.btn1').click(function(){
    $('.overlay').show();
    $('.mask').show();

    //禁掉滚动条
    $('body').css('overflow','hidden');

    //弹窗于整个窗口垂直居中
    $('.mask').css('top',($(window).height()-$('.mask').height())/2+$(document).scrollTop()+'px');
  });

  //关闭弹窗
  $('.close').click(function(){
    $('.overlay').hide();
    $('.mask').hide();
    $('body').css('overflow','auto');
  });
});
</script>

简单实用的JQuery弹出层的更多相关文章

  1. JQuery弹出层,实现弹层切换,可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  3. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  4. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  5. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  6. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  7. jQuery弹出层效果

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  8. layer —— 一个简单的jQuery弹出层插件

    layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...

  9. webui-popover 一个轻量级的jquery弹出层插件

    该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用.它支持IE7以上的浏览器. 首先要引入需要的css  js  文件 <link rel="s ...

随机推荐

  1. IOS9.0 之后友盟分享详细过程

    一: 申请友盟的AppKey(友盟的Key是根据应用的名称生成的!) 在友盟注册了你自己的开发者账号后就可以申请AppKey了.然后在这个方法里面设置Key - (BOOL)application:( ...

  2. Dirty Flag 模式及其应用

    之前在开发中就发现"dirty"是一种不错的解决方案:可以用来延缓计算或者避免不必要的计算.后来在想,这应该也算一种设计模式吧,于是搜索"Dirty设计模式", ...

  3. angular 输入框实现自定义验证

    此插件使用angular.js.JQuery实现.(jQuery的引入需在angular 之前) 用户可以 在输入框输入数据后验证 必填项.整数型.浮点型验证. 如果在form 里面的输入框验证,可以 ...

  4. HashTable源码分析

      本次分析代码为JDK1.8中HashTable代码.   HashTable不允许null作为key和value.   HashTable中的方法为同步的,所以HashTable是线程安全的. E ...

  5. 阿里巴巴Java开发手册评述

    2016年底的时候阿里巴巴公开了其在内部使用的Java编程规范.随后进行了几次版本修订,目前的版本为v1.0.2版.下载地址可以在其官方社区-云栖社区https://yq.aliyun.com/art ...

  6. 解析java泛型(一)

    对于我们java中的泛型,可能很多人知道怎么使用并且使用的还不错,但是我认为想要恰到好处的使用泛型,还是需要深入的了解一下它的各种概念和内部原理.本文将尽可能的囊括java泛型中的重要的概念.主要内容 ...

  7. Mysql删除表格之后,进行恢复

    一:存在在PHPmyAdmin下找到表格导出然后再导入 二:当没有备份时,使用binlog功能进行恢复 先进入到/etc/my.cnf文件中. 在文件中添加一句:log-bin=mysql-bin 然 ...

  8. Asp.net mvc 知多少(九)

    本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问http:/ ...

  9. 用友财务软件U8V10.1虚拟机 及培训视频

    需要学习用友财务软件U8V10.1虚拟机 及培训视频 ,请联系QQ:858-048-581 虚拟机系统为WIN2003+SQLSERVER2008+U8V10.1,虚拟机内存最少需要2G

  10. How to create a repository in Github with Eclipse?

    How to create a repository in Github with Eclipse? Here is an answer. I will teach you how to do it ...