如何让此功能在我的 html 页面上一次性使用?

How do I make this function work for a single time for my html page?

$(document).ready(function() {    // show popup when you click on the link

   $('.show-popup').hover(function(event){

      event.preventDefault(); // disable normal link function so that it doesn't refresh the page

      var docHeight = $(document).height(); //grab the height of the page

      var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where >you're scrolling
      var selectedPopup = $(this).data('showpopup'); //get the corresponding popup to show

      $('.overlay-bg').show().css({ 'height' : docHeight }); //display your popup background and set >height to the page height
      $('.popup' + selectedPopup).show().css({ 'top': scrollTop + 20 + 'px' }); //show the appropriate popup >and set the content 20px from the window top

   }   

});

试试这个..

 $('.show-popup').hover(function(event){

      event.preventDefault(); // disable normal link function so that it doesn't refresh the page

      var docHeight = $(document).height(); //grab the height of the page

      var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where >you're scrolling
      var selectedPopup = $(this).data('showpopup'); //get the corresponding popup to show

      $('.overlay-bg').show().css({ 'height' : docHeight }); //display your popup background and set >height to the page height
      $('.popup' + selectedPopup).show().css({ 'top': scrollTop + 20 + 'px' }); //show the appropriate popup >and set the content 20px from the window top

      $('.show-popup').unbind('mouseenter mouseleave'); //unbind the event handler
   }   

试试这个

$(document).ready(function() {    // show popup when you click on the link

   $('.show-popup').hover(function(event){

      event.preventDefault(); // disable normal link function so that it doesn't refresh the page

      var docHeight = $(document).height(); //grab the height of the page

      var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where >you're scrolling
      var selectedPopup = $(this).data('showpopup'); //get the corresponding popup to show

      $('.overlay-bg').show().css({ 'height' : docHeight }); //display your popup background and set >height to the page height
      $('.popup' + selectedPopup).show().css({ 'top': scrollTop + 20 + 'px' }); //show the appropriate popup >and set the content 20px from the window top
      $(this).removeClass("show-popup");

   }   

});