添加jquery模式關閉按鈕

我在jquery上做了一個快速模式，這樣當我滾動到頁面底部時，我會在底部角落獲得一個彈出窗口。基本上我需要使它只在滾動到頁面的那一部分時出現，並且您可以選擇關閉它。我如何去添加一個關閉功能？當滾動到頁面的那一部分時，也可以在顯示之前幾秒鐘延遲彈出。添加jquery模式關閉按鈕

謝謝！

<!DOCTYPE html> 
<html> 
<head> 

    <title>Peekaboo</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 


    <style> 

    html, body { 
     margin: 0; 
     padding: 0; 
    } 
    .content { 
     display: block; 
     min-height: 3000px; 
    } 

    .peekaboo { 
     position: fixed; 
     right: 0; 
     bottom: 0; 
     display: block; 
     width: 200px; 
     height: 150px; 
     background-color: red; 
     -webkit-transition: all 0.6s ease; 
     -o-transition: all 0.6s ease; 
     -ms-transition: all 0.6s ease; 
     transition: all 0.6s ease; 
     bottom: -150px; 
    } 
    .peekaboo.open { 
     bottom: 0; 
    } 
    </style> 


    <script> 
    $(function() { 


     $(window).scroll(function() { 

      // calculate the percentage the user has scrolled down the page 
      var scrollPercent = ($(window).scrollTop()/$(document).height()) * 100; 

      if (scrollPercent > 70) { 
       $(".peekaboo").addClass('open'); 

      } 

     }); 

    }); 
    </script> 

</head> 
<body> 

    <div class="content"> 


    </div> 

    <div class="peekaboo"> 
     Peekaboo! 
    </div> 


</body> 
</html>

來源

2014-09-26 Gabriela Pinto

，一旦你關閉它，然後再滾動，它不應該顯示彈出是不是 – 2014-09-26 02:58:03

你可以嘗試像

$(function() { 
 
    $(window).on('scroll.peekaboo', function() { 
 
    // calculate the percentage the user has scrolled down the page 
 
    var scrollPercent = ($(window).scrollTop()/$(document).height()) * 100; 
 
    if (scrollPercent > 70) { 
 
     //to add a 1 sec delay 
 
     setTimeout(function() { 
 
     $(".peekaboo").addClass('open'); 
 
     }, 1000) 
 
    } 
 
    }); 
 

 
    $('.peekaboo .close').click(function() { 
 
    $(".peekaboo").removeClass('open'); 
 
    //remove the scroll handler so that the modal won't be shown again on scroll 
 
    $(window).off('scroll.peekaboo'); 
 
    }) 
 
});

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.content { 
 
    display: block; 
 
    min-height: 3000px; 
 
} 
 
.peekaboo { 
 
    position: fixed; 
 
    right: 0; 
 
    bottom: 0; 
 
    display: block; 
 
    width: 200px; 
 
    height: 150px; 
 
    background-color: red; 
 
    -webkit-transition: all 0.6s ease; 
 
    -o-transition: all 0.6s ease; 
 
    -ms-transition: all 0.6s ease; 
 
    transition: all 0.6s ease; 
 
    bottom: -150px; 
 
} 
 
.peekaboo.open { 
 
    bottom: 0; 
 
} 
 
.peekaboo .close { 
 
    position: absolute; 
 
    right: 2px; 
 
    top: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="content"></div> 
 
<div class="peekaboo"> 
 
    Peekaboo! <span class="close">close</span> 
 
</div>

來源

2014-09-26 02:57:05

@GabrielaPinto也嘗試http://jsfiddle.net/arunpjohny/48kkconk/1/ - 這是更好的，因爲滾動處理程序先前被刪除 – 2014-09-26 03:25:13

您可以通過完成使用jQuery的延遲（）方法與動畫（而不是CSS 3動畫）組合的延遲。

關閉按鈕，您可以在彈出的div中添加一個元素，併爲其分配一個單擊事件。當它被點擊時，你可以在peekaboo div上使用jQuery的hide（）方法來隱藏它（見下文）。

我喜歡使用ID選擇器而不是類選擇器，因爲它們需要較少的DOM遍歷。

另外我注意到，在我的大屏幕上，scrollPercent在瀏覽器全高時從來沒有達到70％。你可能會嘗試一種不同的方法來檢測滾動位置，但我沒有試圖解決這個問題。

<!DOCTYPE html> 
<html> 
<head> 

<title>Peekaboo</title> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<style> 

html, body { 
    margin: 0; 
    padding: 0; 
} 
.content { 
    display: block; 
    min-height: 3000px; 
} 

.peekaboo { 
    position: fixed; 
    right: 0; 
    bottom: 0; 
    display: block; 
    width: 200px; 
    height: 150px; 
    background-color: red; 
    bottom: -150px; 
} 

.open { 
    bottom: 0; 
} 

.closeBtn { 
    cursor: pointer; 
} 

</style> 


<script> 
$(function() { 

    $(window).scroll(function() { 

     // calculate the percentage the user has scrolled down the page 
     var scrollPercent = ($(window).scrollTop()/$(document).height()) * 100; 

     if (scrollPercent > 70) { 

      $("#peekaboo").delay('slow').animate({ bottom: 0 }); 

     } 

    }); 

    $('#close').click(function() { 
     $('#peekaboo').hide(); 
    }); 
}); 
</script> 

</head> 
<body> 

<div class="content"> 

</div> 

<div id="peekaboo" class="peekaboo"> 
    <div id="close" class="closeBtn">Close</div> 
    Peekaboo! 
</div>

來源

2014-09-26 03:20:38

添加jquery模式關閉按鈕

回答

相關問題