在页面加载时启动模式

Question

I'm trying to launch a modal when the page loads. The problem is that I don't have access to the head section.

I have created a modal with a button. If I click that button, the modal shows. Now I tried hiding the button, and then simulate a click with javascript. I expect that the modal will show then. But it doesnt.
Should "document.getElementById("hiddenbutton").click();" not fire the button?

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

thanks

Answer 1

It looks like you are using bootstrap, so you can use the $('#modal_default').modal('show') to show the modal.

You don't need access to the head section. Just add this javascript code to your page:

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

Answer 2

Put this script in the head of your page:

<script type="text/javascript">

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

</script>

But make sure to import bootstrap.js and jQuery.js in your page before the execution of the above snippet.