頁面加載時顯示純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彈出

回答

相關問題