Why chrome exits from fullscreen on popup?

Question

I am using https://github.com/private-face/jquery.fullscreen for fullscreen in my web page.

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.

What might be the reason behind this? Is there any workarounds for this issue?

This example is taken from github page , it works on my local system, but snipet here does not works,I'm sorry

$( 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');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/private-face/jquery.fullscreen/master/release/jquery.fullscreen.min.js"></script>

<div id="main">

  <div id="fullscreen" style="background-color: #fff; color: #000;">
    <h2>Example</h2>
    <p>Your browser <span id="support">doesn't support</span> FullScreen API.</p>
    <p>This block is <span id="state">not</span> in fullscreen mode. <a href="#" class="requestfullscreen">Click to open it in fullscreen</a><a href="#" class="exitfullscreen" style="display: none">Click to exit fullscreen</a>.</p>
    <button type="button" class="btn" onclick="window.open('http://stackoverflow.com/','Page','menubar=no, status=no, scrollbars=no, menubar=no, width=200, height=100');">hello</button>

  </div>
</div>

Louys Patrice Bessette · Answer 1 · 2016-05-27T07:33:15.060

1

Try a modal, instead of a popup, if you want to show something during your fullscreen display.

Here is a cute cut'n pasted description about the behavior of a popup:
«They say "Hey, I'm here now. You don't have to deal with me right now, keep doing what you're doing, but I'm not going away until you say you don't want me around anymore."» Ref.

I' don't know about cross-browser compatibility of the fullscreen script you use.
But since you're like it... Keep it!
And try another method than window.open() for the message you want to display over it.

You could use a modal placed in <div id="main"> which could display "over" your <div id="fullscreen">... It is what I would do in order to not «disturb» the fullscreen display.

On this modal opening trigger, you can use jQuery's $.load() to access another file on the server...
If needed.

edited May 27 '16 at 07:33

answered May 27 '16 at 06:38

Louys Patrice Bessette

33,375
6
36
64

I know modals is better, but in this case I can't go with modal. – Arun Xavier May 27 '16 at 07:11
Can you explain why? – Louys Patrice Bessette May 27 '16 at 07:21
@Javy if you can't go modal then you're doomed as this is default browser behavior for creating a new browser instance (which is what a popup is). If you can't go modal, then you don't sound like you have control over the source code whatsoever, because there is 0 reasons you can't use a modal and HAVE to use a popup. Try asking your programmer to add a modal for you instead then – zerohero May 27 '16 at 07:37
I don't get why you couldn't make a modal. Modal is, finally, just a set of div, normally hidden... That show on a trigger event. It is called "modal" because it is z-indexed to be over the top of any other element. This is only CSS. No DOM call. So no fullscreen disturbance should occur. – Louys Patrice Bessette May 27 '16 at 07:41
Just for the record. My previous comment was in reply to @zerohero... Misread and thougth it was Javy's answer to my «Can you explain» (lol) – Louys Patrice Bessette May 27 '16 at 07:53
Why I cant go for modal > cause I am opening some external web pages, like share to facebook, twitter , etc.. @LouysPatriceBessette – Arun Xavier May 27 '16 at 08:09
With the $.load function, you can call another one of YOUR pages that you will dedicate to call these "external" pages. Reason rejected ;) – Louys Patrice Bessette May 27 '16 at 08:13
Btw $.load is a jQuery's short-hand for ajax page call. – Louys Patrice Bessette May 27 '16 at 08:15
Calling FB.login() results in the JS SDK attempting to open a popup window. As such, this method should only be called after a user click event, otherwise the popup window will be blocked by most browsers.@LouysPatriceBessette – Arun Xavier May 27 '16 at 08:21
and for using a custom modal for sharing contents need `publish_actions` permission for your facebook app,but with default popup you don't need those permissions and app. – Arun Xavier May 27 '16 at 08:23
**Well...** Here you're getting me lost. But I think (I may be wrong) that the result of an ajax call like jQuery's `$.load` function *should* be the same as opening a window with `window.open`... Except that you can redirect it's content in a specific div of your actual page without calling DOM. **BUT** if this pageload triggers a popup anyway... The problem remains. If so, create a new question on this particular topic. – Louys Patrice Bessette May 27 '16 at 08:34

Why chrome exits from fullscreen on popup?

1 Answers1