Question

如何使用javascript（jquery）触发下面的纯css模式？我不需要标签，因为我想在用户访问页面时触发。

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

使用javascript触发纯css模式

1 个答案:

-jsFiddle-