Question

Doing a JQuery overlay call using this demo: http://jquerytools.org/demos/overlay/custom-effect.html

Overlay is showing for me, but the mask in the overlaying is affecting the entire page and not exposing the main div element. I.E. the popup box is dimmed out and opaque also.

I am pulling the JQuery library and tools with the following:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/all/jquery.tools.min.js"></script>

Here is my code:

HTML:

<div class="contact_overlay" id="overlay_1">
<div class="close">X</div>
</div>

CSS:

.contact_overlay {
display:none;
z-index: 1000;
background-color:#d1e8db;
width:700px;
min-height:350px;
border:1px solid #666; 
-moz-box-shadow:    0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
box-shadow:         0 0 90px 5px #000;
margin-left: 100px;
margin-right: 100px;
}
.contact_overlay .close {
position:absolute;
right:3px;
top:3px;
cursor:pointer;
width: 22px;
height: 17px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
border: 0px;
background-color: #959595;
color: #FFFFFF;
font-weight: bold;
font-size: 10px;
text-align: center;
padding-top: 6px;
}

JavaScript:

$.easing.drop = function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
};
$.tools.overlay.addEffect("drop", function(css, done) {
var conf = this.getConf(),
overlay = this.getOverlay();
if (conf.fixed)  {
    css.position = 'fixed';
} else {
    css.top += $(window).scrollTop();
    css.left += $(window).scrollLeft();
    css.position = 'absolute';
}
overlay.css(css).show();
overlay.animate(
    { top: '+=55',  opacity: 1,  width: '+=20'}, 400, 'drop', done
);
}, function(done) {
this.getOverlay().animate(
    {top:'-=55', opacity:0, width:'-=20'}, 300, 'drop',
    function() {
        $(this).hide();
        done.call();
    });
});
$(document).ready(function() {
  $("a[rel]").overlay({
    effect: 'drop',
    mask: '#789',
    })
});

Example image of the issue:

Answer 1

Looks like you need to give the popup a higher z-index value than the overlay.