CODEWITHSUNDEEP
javascriptbootstrap-modal
Maki
Maki

Reputation: 119

open bootstrap modal js doesn't work

I have read many posts of others about this topic and all have the same solution. But somehow it doesn't work for me and I suspect that I missed something, but cannot find out what.

I want to show a bootstrap modal with the load of the page (in the end if there is a special $_GET event, why I would need php later on).

This is my modal which is shown on triggering by a button but not on page load:

<div id = "detail-modal" class="modal fade detail-modal" role="dialog" aria-labelledby="meinGroßesModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="rasterSystemModalLabel">test</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div id="detail-modal-content" class="col-md-12">
                            test
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
            </div>

        </div>
    </div>
</div>

And this is the respective js that should work since most poeple seem to use it:

<script type='text/javascript'>
    $(document).ready(function(){
        $('#detail-modal').modal('show');
    });
</script>

I also tried to trigger an onload-event for the modal and tried different positions for the script as well as calling the modal by Id or class and different versions of the above code. Nothing worked so far. I hope you are able to help and show me my fault :)

Thanks in advance!

Upvotes: 1

Views: 1779

Answers (1)

quangminhs
quangminhs

Reputation: 151

Just wrap the modal you want to call on page load inside a jQuery load event on the head section of your document and it should popup, like so:

JS

<script type="text/javascript">
$(window).on('load',function(){
    $('#myModal').modal('show');
});

HTLML

    <div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div

>

Upvotes: 1

Related Questions