使用javascript觸發純CSS模式

Question

如何使用javascript（jquery）在純CSS模式以下觸發？ 我不需要標簽，因為我想在用戶訪問頁面時觸發。

http://jsfiddle.net/h84nubzt/

<label class="btn" for="modal-one">Example</a>
    <!-- Modal One -->
    <div class="modal">
        <input class="modal-open" id="modal-one" type="checkbox" hidden>
        <div class="modal-wrap" aria-hidden="true" role="dialog">
            <label class="modal-overlay" for="modal-one"></label>
            <div class="modal-dialog">
                <div class="modal-header">
                     <h2>Modal in CSS?</h2>

                    <label class="btn-close" for="modal-one" aria-hidden="true">×</label>
                </div>
                <div class="modal-body">
                    <p>One modal example here! :D</p>
                </div>
                <div class="modal-footer">
                    <label class="btn btn-primary" for="modal-one">Nice!</label>
                </div>
            </div>
        </div>
    </div>

Answer 1

您可以調用click() DOM節點方法：

$('label.btn')[0].click();

要么：

document.querySelector('label.btn').click();

或將復選框的選中狀態設置為true：

$('#modal-one').prop('checked', true);

document.getElementById('modal-one').checked = true;

在兼容HTML5的瀏覽器中也是如此：

window['modal-one'].checked = true;

-jsFiddle-