title: On click add/remove overflow hidden
body: <p>I'm trying to add/remove <code>.css('overflow-y','hidden')</code> <code>onclick</code>, Which I did. The problem appears when I try to remove that css, also <code>onclick</code>. But this time, user needs to click on another element.</p>
  
  <p>Idea is to have modal (twitter bootstrap 2.3) window where there is some data and when user click on modal button (triggers) the css applies to html element in order to prevent scrolling of the website. And now when I click anywhere on modal (modal shuts down) but there is still <code>overflow-y</code> styling and because of it I can't scroll my page. </p>
  
  <p>So this is what I've made, but I have been stuck here and don't know where I am making mistake. Could anyone help me with this one, and if is possible give me some advice so I could take care in future.</p>
  
  <p>Thanks!</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
       $('#myModal').modal('hide')             // initializes and invokes show immediately&lt;/p&gt;
       $('.note').delay(10000).fadeOut('slow');
  
       $(document).ready(function() {
           var $html = $('html');
           var $button = $('.container &gt; .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'); 
                   });
               };
           });
  
       });
  
    &lt;/script&gt;
  </code></pre>