如何退出全屏onclick

Question

我的网页上有全屏模式。单击按钮后，图像会全屏显示。 我需要通过单击删除按钮或按退出按钮退出全屏。我应该用哪种功能来实现这个目标？

的jQuery

$('.fullscreen').bind('click', function(event) {
   var sectionId = $(this).parents('ul').attr('id');
   var outputId  sectionId.replace('ul','img');
   var fullObj = $('#singleTemp').clone();
   var imgTarget = $('#' + outputId).attr('src');

   fullObj.find('#full').attr('src', imgTarget);

   $('#fullscreenTemp').html(fullObj.html());

   var target = document.getElementById('fullscreenTemp');
   $('#fullscreenTemp').show();

   screenfull.request(target);

我使用了jQuery全屏插件（screenfull）。这是全屏按钮的全屏类。

HTML

  <div id="singleTemp" style="display:none">
     <div id="fullDiv" style="text-align: center">
     <div class="fs-main"> 
     <div class="fs-pic"> <img id="full" style="max-height:100%; max-width:100%;" 
         alt="imagecontainer image" src=""/></div>
      <div class="fs-leftarrow"><img  id="1" src="jqe13/image/leftarrow.PNG"/></div>
      <div class="fs-rightarrow"><img src="jqe13/image/rightarrow.PNG"/></div>
      <div class="fs-remove"><img src="jqe13/image/removee.png" height="20" 
    onclick=""/></div>
      <div class="fs-like"> <img src="jqe13/image/like.PNG" height="45"/></div>
      <div class="fs-unlike"><img src="jqe13/image/unlike.PNG" height="45"/></div>
     </div>
     </div>
     </div>

全屏：

     <ul>
     <li id="outfullscreen"><a href="#"><img src="jqe13/image/fullscreen_c.PNG" 
        alt="Full Screen" class="fullscreen" title="Full Screen"></a></li></ul>

我的代码工作正常，没有错误。现在我想点击一下关闭全屏模式。

Answer 1

你还没有提到你正在使用的jQuery插件。我假设您通过查看代码段来使用screenfull.js。

您应该可以通过拨打screenfull.exit();

退出全屏

像......那样的东西。

<button id="exit">Exit</button>
$('#exit').click(function() {
    screenfull.exit();
});

希望这有帮助。