ページ読み込み時に純粋なCSSポップアップを表示

Question

ページ読み込み時に純粋なCSSポップアップを表示したかった。 JavaScriptを使用することはできません。チェックボックスとラジオボタンの要素も使用できません。

は私がhttp://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.htmlと

しかし、ここでは、ポップアップショーボタンまたは要素上のユーザーがクリックした後http://www.cssscript.com/demo/minimal-overlay-modal-pure-css/からいくつかの助けを発見しました。しかし、ページが読み込まれたときにポップアップを表示したかったのです。

すべてのソリューションはありますか？

Answer 1

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    position: relative; 
 
} 
 
input { 
 
    display: none; 
 
} 
 
input:checked + label { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-color: rgba(0, 0, 0, .6); 
 
} 
 
input:not(:checked) + label { 
 
    display: none; 
 
} 
 
.m-window { 
 
    background-color: white; 
 
    padding: 2em; 
 
    display: inline-block; 
 
    border-radius: 4px; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, .8); 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<input type="checkbox" checked id="modal"> 
 
<label for="modal"> 
 
    <div class="m-window"> 
 
    click me! 
 
    </div> 
 
</label> 
 
<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse felis est, cursus sed pulvinar ac, facilisis sed est. Mauris eget tortor luctus, congue ante ut, ultrices arcu. Vivamus suscipit nisi eget est facilisis, at tincidunt dui pretium. Etiam 
 
    dolor orci, condimentum a neque ut, hendrerit aliquam lectus. Nulla efficitur lectus risus, in ullamcorper mi porta sit amet. Sed risus mauris, maximus vitae dignissim a, vulputate a diam. Sed efficitur viverra leo, ac mollis risus laoreet nec. Nam 
 
    semper eleifend mattis. Aliquam erat volutpat. Ut sagittis imperdiet lorem quis mollis. Phasellus interdum nulla sed fringilla posuere. Nullam molestie mi vel ligula interdum placerat. Ut ac condimentum nunc. Aenean eleifend at nisl in posuere. Etiam 
 
    eget aliquam velit. Vivamus pulvinar lacinia urna id iaculis. Pellentesque porttitor neque a ipsum malesuada rutrum. Cras accumsan felis eu metus eleifend, nec venenatis ipsum ullamcorper. Cras non massa purus. Sed urna leo, iaculis vel tincidunt vel, 
 
    laoreet eu tellus. Ut porta orci at ex lacinia pellentesque. Aenean eu pulvinar erat, eu fermentum risus. Morbi ipsum nisi, vestibulum et ante sed, semper sollicitudin erat. Nam eu lorem a neque vulputate semper. Pellentesque eu purus dignissim, consequat 
 
    elit ut, gravida mi. Suspendisse lobortis sodales lacus sit amet condimentum. Fusce porta est non condimentum dictum. Duis vel volutpat lectus, ut auctor augue. Pellentesque neque diam, euismod nec nulla eu, dapibus consectetur diam. Donec maximus lectus 
 
    sit amet quam dignissim, et commodo enim commodo. Suspendisse laoreet rhoncus orci, eu fringilla massa aliquet a. Curabitur consequat, purus id porttitor finibus, magna odio bibendum elit, nec interdum dolor magna eget ligula. In ultrices interdum bibendum. 
 
    Praesent ultrices ultricies tellus vitae pellentesque. Vivamus arcu justo, dignissim sit amet orci non, faucibus sollicitudin ligula. Morbi laoreet vestibulum risus nec posuere. 
 
</p>