動態高度寬度可以創建div克隆 - jQuery的/ JavaScript的

我使用jQuery創建一個div：動態高度寬度可以創建div克隆 - jQuery的/ JavaScript的

jQuery(window).on('load resize', function() 
{ 
    // jQuery('.overlay').remove(); if i use remove then its not appending the div anymore. 
    var html_width = jQuery('html').width(); 
    var html_height = jQuery('html').height(); 
    jQuery('html').append('<div class="overlay"></div>').fadeIn('slow'); 
    jQuery('.overlay').css({'width': html_width, 'height': html_height}); 
});

現在的問題是，當我調整我的瀏覽器，更多的克隆創建。我想刪除所有以前的div並追加當前的div。

任何幫助，將不勝感激。

圖像：

來源

2014-10-27 user3266957

刪除它，然後在你的HTML – roullie 2014-10-27 07:48:12

再次追加它@roullie它不是追加WH我刪除它。 – user3266957 2014-10-27 07:49:02

@ TenorB我在上面編輯過。 – user3266957 2014-10-27 07:51:03

你爲什麼不斷增加，它只是增加了一次，如果你要更新的高度和寬度這樣來做：

<script> 
    jQuery('body').append('<div id="overlay" class="overlay"></div>'); 
    jQuery(window).on('load resize', function() 
    { 
     var html_width = jQuery('html').width(); 
     var html_height = jQuery('html').height(); 
     jQuery('body #overlay').css({ 'width': html_width, 'height': html_height }); 
     jQuery("#overlay").css("display", "block"); 
    }); 
</script>

來源

2014-10-27 08:13:24 Shadi

如何想這個嗎？

jQuery(window).on('load resize', function() 
{ 
    jQuery('.overlay').remove(); 
    var html_width = jQuery('html').width(); 
    var html_height = jQuery('html').height(); 
    jQuery('body').append('<div class="overlay"></div>'); 
    jQuery('body div.overlay').css({'width': html_width, 'height': html_height}); 
});

來源

2014-10-27 07:52:24 roullie

我調整我的瀏覽器後，它被刪除，但從未再次出現。 – user3266957 2014-10-27 07:59:31

@ user3266957您正在使用哪種瀏覽器？ – xxbinxx 2014-10-27 08:03:36

我正在使用Firefox。 – user3266957 2014-10-27 08:06:08

<html> 
<head> 
    <style> 
     .overlay { 
      background-color: rgba(0,0,0,0.5); 
      width: 100%; 
      height: 100% 
     } 
    </style> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
</head> 

<body> 

    <div class="overlay"> 

    </div> 

    <script type="text/javascript"> 

     $(window).on('load resize', function(){ 

      var w = $(this).width(); 
      var h = $(this).height(); 

      $('.overlay').remove(); 

      $('body').append('<div class=overlay></div>'); 

     }) 

    </script> 
</body> 
</html>

這是不是一個好的做法..

爲什麼不只是做通過CSS屬性

來源

2014-10-27 09:56:14

實際上，當我點擊分頁頁碼時，我正在使用它。使用CSS有時不會覆蓋高度，因爲一些頁面有2條評論，有些評論有10條評論，因此高度正在動態變化。謝謝 – user3266957 2014-10-29 06:33:33

動態高度寬度可以創建div克隆 - jQuery的/ JavaScript的

回答

相關問題