Question

我尝试在页面加载时启动模式。问题是我无法访问头部。

我用按钮创建了一个模态。如果我单击该按钮，模态显示。现在我尝试隐藏按钮，然后使用javascript模拟点击。我希望模态会显示出来。但它没有。
应该＆＃34; document.getElementById（＆＃34; hiddenbutton＆＃34;）。click（）;＆＃34;不要按下按钮？

<button id="hiddenbutton" type="button"  data-toggle="modal" data-target="#modal_default" style="display: none;"></button>
                <!-- Basic modal -->
            <div id="modal_default" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h5 class="modal-title">Basic modal</h5>
                        </div>

                        <div class="modal-body">
                            <h6 class="text-semibold">Text in a modal</h6>
                            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

                            <hr>

                            <h6 class="text-semibold">Another paragraph</h6>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /basic modal -->


<script type="text/javascript">   

    document.getElementById("hiddenbutton").click();

感谢

Answer 1

看起来你正在使用bootstrap，所以你可以使用$('#modal_default').modal('show')来显示模态。

您无需访问head部分。只需将此javascript代码添加到您的页面：

<script type="text/javascript">
$(function() {
    $('#modal_default').modal('show');
})
</script>

Answer 2

将此脚本放在页面的头部：

<script type="text/javascript">

   $(document).ready(function()
   {
       $('#modal_default').modal('show');
   });

</script>

但请确保在执行上述代码段之前在页面中导入bootstrap.js和jQuery.js。

在页面加载时启动模式

2 个答案: