jquery制作弹出层带遮罩效果,点击阴影部分层消失。

整体还是比较简单的。

HTML代码很简单

 <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">jquery点我弹出</a>
<div id="myModal" class="reveal-modal">
<h1>jquery弹出层</h1>
<p>很不错的效果</p>
<a class="close-reveal-modal">×</a>
</div>

定义弹出层的样式

 .reveal-modal-bg { position: fixed; height: 100%; width: 100%; z-index:; display: none; top:; left:; background:rgba(00, 00, 00, 0.8) }

     .reveal-modal { visibility: hidden; top: 150px; left: 50%; margin-left: -300px; width: 520px; position: absolute; z-index:; padding: 30px 40px 34px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4); -box-shadow: 0 0 10px rgba(0,0,0,.4); background-color: #FFF;         }

     .reveal-modal.small         { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;} .reveal-modal .close-reveal-modal { font-size: 22px; line-height: 0.5; position: absolute; top: 8px; right: 11px; color: #333; text-shadow: 0 -1px 1px rbga(0,0,0,.6); font-weight: bold; cursor: pointer; }

重点是js

引用jquery库是必不可少的。

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>

最后是js

 (function($) {

 /*---------------------------
点击属性
----------------------------*/ $('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$('#'+modalLocation).reveal($(this).data());
}); /*---------------------------
扩展和执行方法
----------------------------*/ $.fn.reveal = function(options) { var defaults = {
animation: 'fadeAndPop', //动画效果
animationspeed: 300, //效果时间
closeonbackgroundclick: true, //如果你点击背景模态会关闭
dismissmodalclass: 'close-reveal-modal' //一个按钮或元素的类将关闭一个开放的模态
}; //Extend dem' options
var options = $.extend({}, defaults, options); return this.each(function() { /*---------------------------
全局变量 ----------------------------*/
var modal = $(this),
topMeasure = parseInt(modal.css('top')),
topOffset = modal.height() + topMeasure,
locked = false,
modalBG = $('.reveal-modal-bg'); /*---------------------------
创建背景
----------------------------*/
if(modalBG.length == 0) {
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
} /*---------------------------
打开、关闭动画效果
----------------------------*/
//Entrance Animations
modal.bind('reveal:open', function () {
modalBG.unbind('click.modalEvent');
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"top": $(document).scrollTop()+topMeasure + 'px',
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "fade") {
modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "none") {
modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
modalBG.css({"display":"block"});
unlockModal()
}
}
modal.unbind('reveal:open');
}); //关闭
modal.bind('reveal:close', function () {
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"top": $(document).scrollTop()-topOffset + 'px',
"opacity" : 0
}, options.animationspeed/2, function() {
modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
unlockModal();
});
}
if(options.animation == "fade") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity" : 0
}, options.animationspeed, function() {
modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
unlockModal();
});
}
if(options.animation == "none") {
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
modalBG.css({'display' : 'none'});
}
}
modal.unbind('reveal:close');
}); /*---------------------------
添加开放和关闭监听器 ----------------------------*/
//立即开模态10:42:50
modal.trigger('reveal:open') //关闭
var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
modal.trigger('reveal:close')
}); if(options.closeonbackgroundclick) {
modalBG.css({"cursor":"pointer"})
modalBG.bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
}
$('body').keyup(function(e) {
if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
}); /*---------------------------
锁定动画
----------------------------*/
function unlockModal() {
locked = false;
}
function lockModal() {
locked = true;
} });//each call
}//orbit plugin call
})(jQuery);

OK,完成了,看下效果图。

demo

 

jquery制作弹出层带遮罩效果,点击阴影部分层消失的更多相关文章

  1. jQuery制作弹出窗(模态框)

    来源:(二少)在南极 ##index.html <!DOCTYPE html><html lang="zh"><head> <meta c ...

  2. js弹出对话框,遮罩效果,

    刚刚来到实习单位,我跟着廖哥做项目.然后他分配给我一个小小的任务,实现起来总的效果如下: 然后,但我们单击显示数目这个链接的时候,就会弹出一个又遮罩效果的对话框,如下图: 当我们在对话框中再点击里面的 ...

  3. jQuery.reveal弹出层

    jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...

  4. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  5. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  6. 基于jQuery悬停弹出遮罩显示按钮代码

    今天给大家分享一款基于jQuery悬停弹出遮罩显示按钮代码.这是是一款当鼠标悬停在图片上后,会出现一系列的按钮,文字等弹性动画效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

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

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

  8. JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法(转)

    原文:JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法 jquery-easyui是一个基于jquery的图形界面插件,利用easyui可以创建很多好看的网页界面 ...

  9. js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

随机推荐

  1. Apache 配置 WebSocket 协议

    本文使用 http proxy 方式 实现 apache 支持  WebSocket 请求(JK 使用的 ajp 协议不能支持websocket) 通过 apache 访问 后端 tomcat上的 w ...

  2. XML文件中CDATA的作用

    操作XML文件时,如果允许用户输入内容,例如∶"< ".">"."/".""等,当生成XML时,会破坏了XM ...

  3. sql server中除数为零的处理技巧

    在sql server中做除法处理的时候,我们经常需要处理除数为零的情况,因为如果遇到这种情况的时候,sqlserver会抛出遇到以零作除数错误的异常,我们总不希望把这个异常显示给用户吧. 做个会报这 ...

  4. datetimepicker一个不错的日历android特效

    datetimepicker一个不错的日历效,选中和选择日历效果都很不错, 实用的时候直接可以把datetimepicker-library这个引入到项目,调用的地方在实现 TimePickerDia ...

  5. 误差曲线(Matlab)

    loglog(dof(:),errorestimate(:),:),errorestimate1(:),);hold on; loglog(dof(:),eigvalue(:)-[);%[13.086 ...

  6. U-Mail反垃圾邮件网关过滤Locky勒索邮件

    近期,不少朋友圈有朋友发布相关的邮件提醒,说有关于Locky病毒勒索邮件的.看来这个病毒影响不小啊!下面就说说怎么来防止Locky勒索病毒的侵扰. 什么是Locky勒索病毒 Locky勒索病毒主要以邮 ...

  7. Device eth0 does not seem to be present, delaying initialization. 问题

    今天在复制vmware的时候 出现网卡无法启动 报错显示 Device eth0 does not seem to be present, delaying initialization. 这个错误原 ...

  8. asp.net LINQ连接数据库SQL执行数据的增加、修改、删除、查询操作

    查询数据库中的数据 using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...

  9. SHOPNC占用CPU过高

    今天一个SHOPNC商城突然变慢,查看服务器情况,发现MYSQL占用181%CPU,然后查看PHP慢查询,发现这样的内容 [22-Nov-2016 20:55:41] [pool www] pid 5 ...

  10. C# IntPtr转换为Byte[]

    [DllImport("OpenNetStream.dll")] public static extern int OpenSDK_Data_GetDevList(IntPtr s ...