0

Is it possible to make a Bootstrap modal visible by default without JavaScript? I tried with show, but it doesn't work.

<div class="modal fade show" tabindex="-1" role="dialog" id="update-info-modal">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <p>{{ message|nl2br }}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-{{ label }}" data-dismiss="modal">{{ 'modal.language.close' | trans }}</button>
      </div>
    </div>
  </div>
</div>
Nat Riddle
  • 928
  • 1
  • 10
  • 24
af_fg3
  • 5
  • 1
  • 3
  • If you inspect the HTML of an opened modal you'll see the class you need to add is `in`. If you want the page background to also work you need to manually add a `
    `, and add `modal-open` class to the ``. See https://stackoverflow.com/a/17444580.     – Don't Panic Aug 14 '21 at 09:15

1 Answers1

-1

You can try adding the following code inside the style.

.modal.show {
  display: block;
}

However, this is not a recommended method. Instead, you can trigger the modal right after the first load of the page.

halillusion
  • 258
  • 4
  • 9