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（）来显示/隐藏溢出。

以下是一个简化示例：http://jsbin.com/towiyaqa/1/

Answer 2

您可以这样使用：

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

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>

点击添加/删除溢出隐藏

3 个答案: