Question

我在弹出框中使用此代码并且它运行良好

   $(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;
     });
      });

它是我的HTML代码：

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

但是我的弹出框只有在弹出框外面点击时关闭，但我想在我的框中添加一个关闭按钮，当它点击它时关闭我的框。怎么办呢？

Answer 1

试试这个..

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();
});

关闭jquery弹出框的按钮

1 个答案: