Designing a Modal

Designing a Modal

I am designing a modal and I am having issues with controlling click events. Let me first show a framework of my HTML code so I can better explain the problem

  1. <div class='modal-wrapper'>
  2.             <div class='modal-whole'>
  3.                 <div class='modal-header'>
  4.                     <h1></h1>
  5.                 </div>
  6.                 <div class='modal-body'>
  7.                     <p></p>         
  8.                 </div>
  9.                 <div class='modal-footer'>
  10.                     <a href="#">Close</a>
  11.                 </div>
  12.             </div>
  13.         </div>
The class modal-wrapper will be expanded to fill 100% of the screen and will be top-most over all other elements outside of this framework. The modal-whole class will contain data to display to the user on a much smaller scale. Right now I have jQuery code as follows:

  1. $(".modal-wrapper").click(function() {
  2.       $(this).fadeOut(500);
  3. });

So this WILL fade out when you click the backdrop, however, it will also fadeout when you click within the other elements that are on top of the backdrop. This is an undesired effect and is what I want to counter. Any suggestions?