javascript - 单击添加/删除隐藏的溢出

Question

我正在尝试添加/删除 .css('overflow-y','hidden') onclick，我这样做了。当我尝试删除该 css 以及 onclick 时出现问题。但这一次，用户需要点击另一个元素。

想法是有模态(twitter bootstrap 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

将你的 css 放在一个类中并使用 jquery 的 .toggleClass() 来显示/ overflow hidden 。

这是一个简化的例子:http://jsbin.com/towiyaqa/1/