JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/297788

by Lhankor_Mhy

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.3/dialog-polyfill.css">
<script src="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.3/dist/dialog-polyfill.min.js"></script>
    <section class="menu">
        メニュー
    </section>
    <section class="wrap">
        <img data-for="modal1" class="contents" src="http://placehold.jp/24/cc9999/993333/150x100.png?text=contents">
        <img data-for="modal2" class="contents" src="http://placehold.jp/24/cc9999/993333/150x100.png?text=contents">
        <img data-for="modal3" class="contents" src="http://placehold.jp/24/cc9999/993333/150x100.png?text=contents">
        <img data-for="modal4" class="contents" src="http://placehold.jp/24/cc9999/993333/150x100.png?text=contents">
        <img data-for="modal5" class="contents" src="http://placehold.jp/24/cc9999/993333/150x100.png?text=contents">
        <img data-for="modal6" class="contents" src="http://placehold.jp/24/cc9999/993333/150x100.png?text=contents">
    </section>
    <dialog id="modal1" class="modal">
        <button class="close">x</button>
        <img src="http://placehold.jp/24/cc9999/993333/150x100.png?text=contents" alt="">
        modal1
        <button data-for="submodal1" class="submodalOpen">open</button>
    </dialog>
    <dialog id="modal2" class="modal">
        <button class="close">x</button>
        <img src="http://placehold.jp/24/cc9999/993333/150x100.png?text=contents" alt="">
        modal2
        <button data-for="submodal2" class="submodalOpen">open</button>
    </dialog>
    <dialog id="modal3" class="modal">
        <button class="close">x</button>
        <img src="http://placehold.jp/24/cc9999/993333/150x100.png?text=contents" alt="">
        modal3
        <button data-for="submodal3" class="submodalOpen">open</button>
    </dialog>
    <dialog id="modal4" class="modal">
        <button...

CSS

body{
    display: flex;
}
.menu{
    display: flex;
    align-items: center;
}
.wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.close{
    position: absolute;
    right: 0;
    top: 0;
}
.modal img{
    grid-area: a;
}
.modal{
    display: grid;
    grid-template-areas: "a b"
                         "a c";
    height: auto;
}

JavaScript

document.querySelectorAll('dialog').forEach( e => dialogPolyfill.registerDialog(e) );

document.querySelectorAll('dialog').forEach( e => e.querySelector('.close').addEventListener(
    'click',
    () => e.close()
));

document.querySelectorAll('.contents, .modal button.submodalOpen').forEach( c => c.addEventListener(
    'click', 
    e => document.getElementById( e.target.dataset['for'] ).showModal()
));