Home/ Questions/Q 605661
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T17:10:11+00:00

The following code is fairly self explanatory, but I am running in to an

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0