I set up a modal dialog based on the example in Ch. 7 of the book. My dialog wasn’t showing up in IE or Safari (though it works fine in Firefox), so I opened the sample code from the book and it doesn’t work either. I’m guessing it is the CSS, but I haven’t been able to pinpoint the problem.
Here’s the CSS
#overlay {
display:none;
top: 0; right: 0; bottom: 0; left: 0;
margin-right: auto;
margin-left: auto;
position: fixed;
width: 100%;
z-index: 100;
}
#blanket {
background-color: #000000;
top: 0;
bottom: 0;
left: 0;
display: block;
opacity: 0.8;
position: absolute;
width: 100%;
}
.dialog {
display: none;
margin: 100px auto;
position: relative;
width: 500px;
padding: 40px;
background: white;
-moz-border-radius: 10px;
}
And here’s my revised js
$('a.login').click(function() {
openDialog('#dialog')
return false;
});
$('#dialog')
.find('.close')
.live('click', function() {
closeDialog('#dialog');
})
function openDialog(selector) {
$(selector)
.clone()
.show()
.appendTo('#overlay')
.parent()
.fadeIn('fast');
}
function closeDialog(selector) {
$(selector)
.parents('#overlay')
.fadeOut('fast', function() {
$(this)
.find('#dialog')
.remove();
});
}
There are lots of other modal examples out there, but I hoped to fix this rather than try to redo the whole thing.