Laravel开发网页如何实现点击对应div元素全屏展示功能

现有基础信息 #

• 当前页面展示效果：
• 需求：点击对应卡片div时，该div进入全屏展示状态，目标效果：

现有页面Blade代码 #

<div class="container">
    <div class="boxmk">
        @foreach($kk as $jp)
        <div class="screenshots-card">
           <div class="ScreenShots-root">
              <div class="screenshot-card">
                 <div class="screenshot-card-header">
                    
                    <div class="screenshot-card-header-name">{{$jp->appname}}</div>
                 </div>
                 <div class="screenshot-card-image"><img alt="User Screenshot" class="screenshot-card-thumbnail-image" src="{{ URL::to('screenshots/'.$jp->filename) }}"></div>
                 <div class="screenshot-card-footer">
                    <div class="screenshot-card-footer-information-bar">
                       
                       <div class="screenshot-card-footer-information-bar-timer">
                          <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                             <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path>
                          </svg>
                          <span class="screenshot-card-footer-information-bar-timer-time">{{$jp->time}}</span>
                       </div>
                    </div>
                 </div>
              </div>
           </div>
        </div>
        @endforeach            
     </div>

现有CSS引用代码 #

<link rel="stylesheet" href="https://app.workfolio.io/static/css/main.05c50221.chunk.css">
<link href="https://app.workfolio.io/static/css/2.be6d2076.chunk.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

实现步骤 #

1. 修改Blade模板，给卡片添加点击事件 #

找到class="screenshot-card"的div，添加点击触发函数：

<!-- 修改前 -->
<div class="screenshot-card">
<!-- 修改后 -->
<div class="screenshot-card" onclick="toggleFullscreen(this)">

2. 页面添加全屏切换JS代码 #

在页面底部</body>标签之前插入如下JS代码，兼容主流浏览器：

function toggleFullscreen(element) {
    // 非全屏状态下进入全屏
    if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
        element.classList.add('fullscreen-card');
    } else {
        // 退出全屏
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
        element.classList.remove('fullscreen-card');
    }
}

// 监听ESC全屏退出事件，避免样式类残留
document.addEventListener('fullscreenchange', function() {
    if (!document.fullscreenElement) {
        document.querySelectorAll('.screenshot-card.fullscreen-card').forEach(el => {
            el.classList.remove('fullscreen-card');
        });
    }
});

3. 添加全屏状态自定义样式（可选，优化展示效果） #

在页面的<style>标签或者自定义CSS文件中添加如下样式：

.screenshot-card.fullscreen-card {
    width: 100vw;
    height: 100vh;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
}
.screenshot-card.fullscreen-card .screenshot-card-image {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.screenshot-card.fullscreen-card .screenshot-card-thumbnail-image {
    max-height: 85vh;
    max-width: 90vw;
    object-fit: contain;
}

内容的提问来源于stack exchange，提问作者Dev