jQuery弹出框的关闭按钮

Question

I am using this code for popup box and it's work well

   $(document).ready(function() {

  // Here we will write a function when link click under class popup                   
   $('a.popup').click(function() {


 // Here we will describe a variable popupid which gets the
  // rel attribute from the clicked link                            
   var popupid = $(this).attr('rel');


// Now we need to popup the marked which belongs to the rel attribute
 // Suppose the rel attribute of click link is popuprel then here in below code
  // #popuprel will fadein
$('#' + popupid).fadeIn();


  // append div with id fade into the bottom of body tag
 // and we allready styled it in our step 2 : CSS
   $('body').append('<div id="fade"></div>');
   $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();


    // Now here we need to have our popup box in center of 
   // webpage when its fadein. so we add 10px to height and width 
     var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
    var popupleftmargin = ($('#' + popupid).width() + 10) / 2;


   // Then using .css function style our popup box for center allignment
     $('#' + popupid).css({
  'margin-top' : -popuptopmargin,
    'margin-left' : -popupleftmargin
     });
    });


     // Now define one more function which is used to fadeout the 
     // fade layer and popup window as soon as we click on fade layer
      $('#fade').click(function() {


     // Add markup ids of all custom popup box here                           
        $('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
     return false;
     });
      });

and it's my HTML code:

<div class="popupbox" id="popuprel">
     <div id="intabdiv">
          <h2>Content Demo 1</h2>
               <p>Check out WebDesignersDesk for more tutorials</p> 

      </div>
  </div>
<div id="fade"></div>

but my popup box close only when click outside popup box but i want add a close button in my box and when click it close my box. how can do it?

Answer 1

Try this..

HTML:

<div class="popupbox" id="popuprel">
     <div id="intabdiv">
          <h2>Content Demo 1</h2>
               <p>Check out WebDesignersDesk for more tutorials</p> 

      </div>
      <div class="closepopup">Close</div>
</div>
<div id="fade" class="fade"></div>

Javascript:

$('.closepopup').on('click', function(e) {
    $('.popupbox').fadeOut();
    $('.fade').fadeOut();
});