-1

I have HTML template which have injected bootsrap modal, but modal opening only with the button. I want that modal open automatically when page load, without button.

So this is the button code: 

<button type="button" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

This is the modal code HTML:

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-sm">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                        <h4 class="modal-title" id="mySmallModalLabel">Modal title</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br><br>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                        <button type="button" class="btn btn-success">Save changes</button>
                                                    </div>
                                                </div></div></div>
Karolis Zujis
  • 1
  • 1
    check this answer - https://stackoverflow.com/questions/10233550/launch-bootstrap-modal-on-page-load – Gareth O'Connor Mar 21 '18 at 14:42
  • add class **in** to the modal – Roy Bogado Mar 21 '18 at 15:41
  • 1
    [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) The answer, *"A lot. An absurd amount. More than you think you are capable of. After you have reached the end of your rope and the pain of not having the answer exceeds the vast amount of shame received by posting your question, that's when you can go ahead and ask. Because at that point, you will have done whatever research necessary to make it a good question worth asking!"* –  Mar 21 '18 at 15:55

2 Answers2

0

You could load the modal on document.ready
After the document loads you can either trigger the click event on the button as

   <button type="button" id="smallModalButton" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

 $( document ).ready(function() {
         $('#smallModalButton').click();
});

or you could simply toggle the modal as 

     $( document ).ready(function() {
             $('.bs-example-modal-sm').modal('toggle');
    });
Bikash Chapagain
  • 190
  • 1
  • 9
-2

I found a solution. Change the class from fade to show, and add onclick to close button. Code:

<div class="modal show bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

Button:

 <button type="button" onclick = "$('.modal').removeClass('show').addClass('fade');"  class="btn btn-default" data-dismiss="modal">Close</button>
Karolis Zujis
  • 1