title: Why chrome exits from fullscreen on popup?
body: <p>I am using <a href="https://github.com/private-face/jquery.fullscreen" rel="nofollow">https://github.com/private-face/jquery.fullscreen</a> for fullscreen in my web page.</p>
  
  <p>In my page I have a button that opens a popup on click, on opening popup the fullscreen gets exit in chrome but not in other browsers.</p>
  
  <p>What might be the reason behind this? Is there any workarounds for this issue?</p>
  
  <p><em>This example is taken from github page , it works on my local system, but snipet here does not works,I'm sorry</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( document ).ready(function() {
    // check native support
    $('#support').text($.fullscreen.isNativelySupported() ? 'supports' : 'doesn\'t support');
  
    // open in fullscreen
    $('#fullscreen .requestfullscreen').click(function() {
      $('#fullscreen').fullscreen();
      return false;
    });
  
    // exit fullscreen
    $('#fullscreen .exitfullscreen').click(function() {
      $.fullscreen.exit();
      return false;
    });
  
    // document's event
    $(document).bind('fscreenchange', function(e, state, elem) {
      // if we currently in fullscreen mode
      if ($.fullscreen.isFullScreen()) {
        $('#fullscreen .requestfullscreen').hide();
        $('#fullscreen .exitfullscreen').show();
        $('#fullscreen .btn').show();
      } else {
        $('#fullscreen .requestfullscreen').show();
        $('#fullscreen .exitfullscreen').hide();
      }
  
      $('#state').text($.fullscreen.isFullScreen() ? '' : 'not');
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://raw.githubusercontent.com/private-face/jquery.fullscreen/master/release/jquery.fullscreen.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="main"&gt;
  
    &lt;div id="fullscreen" style="background-color: #fff; color: #000;"&gt;
      &lt;h2&gt;Example&lt;/h2&gt;
      &lt;p&gt;Your browser &lt;span id="support"&gt;doesn't support&lt;/span&gt; FullScreen API.&lt;/p&gt;
      &lt;p&gt;This block is &lt;span id="state"&gt;not&lt;/span&gt; in fullscreen mode. &lt;a href="#" class="requestfullscreen"&gt;Click to open it in fullscreen&lt;/a&gt;&lt;a href="#" class="exitfullscreen" style="display: none"&gt;Click to exit fullscreen&lt;/a&gt;.&lt;/p&gt;
      &lt;button type="button" class="btn" onclick="window.open('http://stackoverflow.com/','Page','menubar=no, status=no, scrollbars=no, menubar=no, width=200, height=100');"&gt;hello&lt;/button&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>