How to open modal on page load ?

[jozefrebjak]

I would like to open modal on page load. I tried to change style from

<div class="modal modal-blur fade" id="test-modal" tabindex="-1" aria-hidden="true" style="display: none;">

to

<div class="modal modal-blur fade show" id="test-modal" tabindex="-1" aria-hidden="false" style="display: block;">

but then I can't close the modal.

Is there some solution ?

Thanks.

[dheineman]

As far as i am aware you cannot properly open bootstrap modals by setting the style. You will have to execute some javascript on page load to programatically open the modal. See the bootstrap documentation for more information.

[radenvodka]

let myModal = new bootstrap.Modal(document.getElementById('test-modal'), {});
myModal.show();

[jozefrebjak]

let myModal = new bootstrap.Modal(document.getElementById('test-modal'), {});
myModal.show();

I tried it this way, but I'm getting in console log:

Can't find variable: bootstrap

[jozefrebjak]

@radenvodka Do I need jquery to achieve this to work?

[jozefrebjak]

Ok, I tried to add

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

Now I'm getting

TypeError: undefined is not an object (evaluating 'this._config.backdrop')

[radenvodka]

<div class="modal modal-blur fade" id="modal-test" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          <div class="modal-status bg-green"></div>
          <div class="modal-body text-center py-4">
            
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check mb-2 text-green icon-lg " width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
               <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
               <circle cx="12" cy="12" r="9"></circle>
               <path d="M9 12l2 2l4 -4"></path>
            </svg>
            <h3>AKSES TERBATAS</h3>
            <div class="text-muted">akun anda tidak memiliki akses ke halaman ini. hubungi admin jika ada pertanyaan.</div>
          </div>
          <div class="modal-footer">
            <div class="w-100">
              <div class="row">
                <div class="col">
                  <a href="javascript:void(0);" class="btn btn-green w-100" data-bs-dismiss="modal">OK</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<script src="./dist/js/tabler.min.js" ></script>
<script src="./dist/js/demo.min.js" ></script>
<script>
let myModal = new bootstrap.Modal(document.getElementById('modal-test'), {});
myModal.show();
</script>

[jozefrebjak]

I get it working, but I need to import also BootstrapJS, till the now I don't need bootstrap native JS at all, tabler.min.js was enought to use.

[radenvodka]

you need Tabler Core. i work in tabler version v1.0.0-beta12

[bulentsakarya]

I'm using Tabler beta20 version. When I add Bootstrap's JS file externally, the modal appears when the page loads, and the close button works, but the dropdown in the menu doesn't work.
Code:

  <script type="module">
            var successModal = new bootstrap.Modal(document.getElementById('modal-success'), {})
            successModal.toggle()
        </script>

If I don't include Bootstrap's JS file, the modal doesn't work when the page loads. Is there anything else I can use instead of new bootstrap.Modal in this case?

I'm using Vite with Laravel.