具有requestFullscreen（）的magnificPopup

Question

我试图在打开巨大的弹出窗口后全屏打开。我为全屏窗口添加了一个按钮，但我不知道为什么这不起作用。这是我尝试执行的代码。可见的当前弹出式div应该与F11功能相同。

  

HTML

<div class="demo_slider_mn clearfix" id="demo_slider_mn">
            <a href="images/other_product_img_1.jpg" title="SEO">
                <img src="images/other_product_img_1.jpg" alt="" title="SEO">
                <div id="close"></div>
            </a>
            <a href="images/other_product_img_1.jpg" title="SEO">
                <img src="images/other_product_img_1.jpg" alt="" title="SEO">
                <div id="close"></div>
            </a>
</div>

  

JAVASCRIPT：

$(document).ready(function() {
    $('#demo_slider_mn').magnificPopup({
        delegate: 'a',
        type: 'image',
        tLoading: 'Loading image #%curr%...',
        mainClass: 'mfp-img-mobile',
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1]
},
        image: {
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
            titleSrc: function(item) {
                return item.el.attr('title') + '<button onclick="openFullscreen();">FULLSCREEN</button>';
            }           
        },
        callbacks: {
            elementParse: function(item) {
            }
        },
        showCloseBtn:true,
    }); 
});
var elem = document.getElementsByClassName("mfp-figure");
function openFullscreen() {
    console.log(elem);
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    }
}