Как изменить параметр click в jQuery?

Question

Во-первых, я хочу сказать, что я бесполезен в jQuery, , поэтому проблема, с которой я столкнулась, заключается в том, что я понятия не имею, как закодировать щелчок на данный момент, чтобы закрыть всплывающее окно, которое вам нужно нажать на кнопку, но Я хотел бы, чтобы всплывающее окно закрывалось, когда вы нажимаете его, вы можете увидеть всплывающее окно здесь http://doctorsafraid.tumblr.com/ (щелкните треугольник, затем ссылки).

Thisis сценарий:

<script> 
$(document).ready(function() { 
    // 
//When you click on a link with class of poplight and the href starts with a # 
$('a.poplight[href^=#]').click(function() { 
    var popID = $(this).attr('rel'); //Get Popup Name 
    var popURL = $(this).attr('href'); //Get Popup href to define size 
    //Pull Query & Variables from href URL 
    var query= popURL.split('?'); 
    var dim= query[1].split('&'); 
    var popWidth = dim[0].split('=')[1]; //Gets the first query string value 
    //Fade in the Popup and add close button 
    $('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend('<a href="#" class="close"><img src="http://i60.tinypic.com/r720j6.png" class="btn_close" alt="close" /></a>'); 
    $('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend; 
    //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css 
    var popMargTop = ($('#' + popID).height() + 90)/2; 
    var popMargLeft = ($('#' + popID).width() + 90)/2; 
    //Apply Margin to Popup 
    $('#' + popID).css({ 
     'margin-top' : -popMargTop, 
     'margin-left' : -popMargLeft 
    }); 
    //Fade in Background 
    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag. 
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 
    return false; 
}); 
//Close Popups and Fade Layer 
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer... 
    $('#fade , .thepopup').fadeOut(function() { 
     $('#fade, a.close').remove(); //fade them both out 

    }); 
    return false; 
}); 

}); 
</script> 

Что я должен изменить?

Answer 1

Возможно, это сработает для вас. Я использую нечто подобное, но без jQuery;)

function closePopup(e) { 
    // Close the popup here 

    // Remove the listener to prevent problems 
    $('html, body').unbind('click', closePopup); 
} 

$('a.poplight[href^=#]').click(function() { 
    // Your code here 

    // Add click evenetlistener on hole page 
    $('html, body').click(closePopup); 
}); 

// Prevent the listener for the hole page 
$("#popupContainer").click(function (e) { 
    e.stopPropagation(); 
}); 

Вот моя отредактированная версия. Он включает в себя ваш код.

<script> 
    $(document).ready(function() { 
     // 
     //When you click on a link with class of poplight and the href starts with a # 
     $('a.poplight[href^=#]').click(function() { 
      var popID = $(this).attr('rel'); //Get Popup Name 
      var popURL = $(this).attr('href'); //Get Popup href to define size 
      //Pull Query & Variables from href URL 
      var query = popURL.split('?'); 
      var dim = query[1].split('&'); 
      var popWidth = dim[0].split('=')[1]; //Gets the first query string value 
      //Fade in the Popup and add close button 
      $('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend('<a href="#" class="close"><img src="http://i60.tinypic.com/r720j6.png" class="btn_close" alt="close" /></a>'); 
      $('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend; 
      //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css 
      var popMargTop = ($('#' + popID).height() + 90)/2; 
      var popMargLeft = ($('#' + popID).width() + 90)/2; 
      //Apply Margin to Popup 
      $('#' + popID).css({ 
       'margin-top': -popMargTop, 
       'margin-left': -popMargLeft 
      }); 
      //Fade in Background 
      $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag. 
      $('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 

      // add click listener to hole page 
      $('html, body').click(closePopup); 

      return false; 
     }); 
     //Close Popups and Fade Layer 
     $('a.close, #fade').live('click', closePopup); 

     // Prevent the listener for the hole page 
     $("#popupContainer").click(function (e) { 
      e.stopPropagation(); 
     }); 

     function closePopup(e) { 
      $('#fade , .thepopup').fadeOut(function() { 
       $('#fade, a.close').remove(); //fade them both out 

      }); 

      $('html, body').unbind('click', closePopup); 

      return false; 
     } 
    }); 
</script>