CODEWITHSUNDEEP
javascripthtml
mitch2k
mitch2k

Reputation: 526

Launch modal on page load

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

Upvotes: 0

Views: 928

Answers (2)

Dani Sh90
Dani Sh90

Reputation: 176

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.

Upvotes: 1

Dekel
Dekel

Reputation: 62536

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>

Upvotes: 3

Related Questions