點擊添加/刪除溢出隱藏

Question

我想添加/刪除.css('overflow-y','hidden')onclick，我做了哪些。當我嘗試刪除該css時，出現此問題，也是onclick。但是這一次，用戶需要點擊另一個元素。

想法是有模態（Twitter的引導2.3）窗口，其中有一些數據，當用戶點擊模式按鈕（觸發器）的CSS適用於HTML元素，以防止滾動的網站。現在，當我點擊模式（模式關閉）的任何地方，但仍然有overflow-y樣式，因此我無法滾動我的頁面。

所以這就是我所做的，但我一直在這裏卡住，不知道我在哪裏犯錯。任何人都可以幫助我解決這個問題，如果可能的話給我一些建議，以便將來我能保重。

謝謝！

<script type="text/javascript"> 
    $('#myModal').modal('hide')    // initializes and invokes show immediately</p> 
    $('.note').delay(10000).fadeOut('slow'); 

    $(document).ready(function() { 
     var $html = $('html'); 
     var $button = $('.container > .btn-primary'); 
     var $modal = $('.modal-backdrop'); 

     $button.on('click', function(e) { 
      $html.css('overflow-y', 'hidden'); 
      if ($html.attr('style')) { 
       alert('WORKS!'); 
      } 

      else { 
       $modal.onclick(function() { 
        $html.css('overflow-y','scroll'); 
       }); 
      }; 
     }); 

    }); 

    </script> 

Answer 1

你可以使用這樣的：

$button.on('click', function(e) { 
    $html.css('overflow-y','hidden' ? 'scroll' : 'hidden'); 
    e.preventDefault(); 
}) 

Answer 2

把你的CSS中的一類，並使用jQuery的.toggleClass（）來顯示/隱藏溢出。

這裏有一個簡單的例子：http://jsbin.com/towiyaqa/1/

Answer 3

這裏是題解：

$(document).ready(function() { 
       var $html = $('html'); 
       var $button = $('.container > .btn-primary'); 
       var $modal = $('.modal-backdrop'); 

       $button.on('click', function(e) { 
        $('.note').delay(10000).fadeOut('slow'); 
        $html.css('overflow-y', 'hidden'); 
        if ($html.attr('style')) { 
         console.log("overflow-y: hidden added"); 
        } 
       }); 

       $('#myModal').on('hidden.bs.modal', function() { 
        // do something… 
        console.log("fires myModal"); 
        $html.css('overflow-y','scroll'); 
       }); 
      }); 

     </script>