Menu
The following code is fairly self explanatory, but I am running in to an issue binding the click event to an element that has been created.
You can see at line 25 I am creating a div with id of 'overlay'. I then set it's css properties.
Then at line 65 I bind click to trigger the hiding of the modal. The problem is, it doesn't work. If I put the div in the html, the the .click works as expected.
Any help is appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Modal</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Select the link(s) with name=modal
$('a[name=modal]').click(function(e) {
// Cancel the link behavior
e.preventDefault();
// Get the id of this link's associated content box.
var id = $(this).attr('href');
// Find the screen height and width
var overlayHeight = $(document).height();
var overlayWidth = $(window).width();
// Create the overlay
$('body').append('<div id="overlay"></div>');
//Set css properties for newly created #overlay
$('#overlay').css({
'width' : overlayWidth,
'height' : overlayHeight,
'position':'absolute',
'left' : '0',
'top' : '0',
'z-index' : '9000',
'background-color' : '#000',
'display' : 'none'
});
// Get the viewpane height and width
var winH = $(window).height();
var winW = $(window).width();
// Center the modal
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
// Transition effects for overlay
$('#overlay').fadeIn(1000).fadeTo(1000,0.8);
// Transition effect for modal
$(id).fadeIn(1000);
});
// Close link click = trigger out
$('.modal .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#overlay').fadeOut(1000);
$('.modal').fadeOut(200);
});
// Overlay click = trigger out
$('#overlay').click(function () {
$('#overlay').fadeOut(1000);
$('.modal').fadeOut(200);
});
// Load rules in to modal
$('#rules .text').load('rules.html');
});
</script>
<style type="text/css">
.modal{
position:absolute;
display:none;
z-index:9999;
}
#rules{
width:600px;
height:400px;
}
#rules p{
background: #fff;
margin: 0;
padding: 0;
}
#rules .head{
background: #ddd;
text-align: right;
padding: 0 10px;
height: 30px;
}
#rules .text{
height: 370px;
padding: 0 20px;
overflow: auto;
}
</style>
</head>
<body>
<p><a href="#rules" name="modal">Open Modal</a></p>
<div id="rules" class="modal">
<p class="head"><a href="#" class="close">close</a></p>
<p class="text"></p>
</div>
</body>
</html>
685
The click event to the overlay is binded before the element exists. You need to use live binding to retain the binding – otherwise you'd have to do the bind every time you create the element. Just change your function to use live() like this:
$('#overlay').live('click', function () {
$('#overlay').fadeOut(1000);
$('.modal').fadeOut(200);
});
The click event for .modal .close works as it is already defined in the DOM when the event is bound.
Normal event binding only considers the elements that currently exist in the DOM while events bound with live() work also on all future elements that match the selector.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
