页面加载时显示纯css弹出

-3

我想在页面加载时显示纯css弹出。我无法使用任何JavaScript，也无法使用任何（复选框和单选按钮）元素。页面加载时显示纯css弹出

我已经发现了一些帮助，从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/

但在这里上的按钮或元素用户点击后弹出节目。但是我想在页面加载时显示弹出窗口。

任何解决方案？

来源

2016-08-25 user2609021

检查：http://www.cssscript.com/demo/minimal-overlay-modal-pure-css/#modal1 此默认打开的模态网页链接你有附加 – Awol

感谢您的帮助......但我不能使用＃标签在最初（我们没有控制这个URL） – user2609021

我出来的想法！出于好奇，这是为了比赛吗？什么给你带来这个要求？ – Awol

-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>

来源

2016-08-25 05:45:24

正确地阅读问题，他说'我不能使用任何（复选框和单选按钮）元素' –

页面加载时显示纯css弹出

回答

相关问题