How can I show modal on page load?

Question

I have a page with a modal window. I can show and hide this modal with a button and the right data-bs- attributes.

Now, What I want is to have the modal shown on page load. It seems the only proper way to do it is to get the modal element in JS and call its .show() method.

But I don't know how to do it on a qweb-only template. Is there a way ?

<template id="my_template" name="Hello there">
    <t t-call="portal.portal_layout">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="my_modal">
            Show Modal
        </button>
        
        <!-- I want this modal to pop up on page load as weel as being able to toggle it with my button -->
        <div id="my_modal" tabindex="-1" role="dialog" class="modal fade">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="my_modal_title">Hi</h5>
                        <button type="button" class="btn text-danger" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true"><i class="fa fa-close"/></span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Content ...
                    </div>
                </div>
            </div>
        </div>
    </t>
</template>

Answer 1

My point of departure was https://jsfiddle.net/saptamdev/rhfkpvow/11/

My changes:

• I added a CSS so we will have a background and display: block; will not be inline
• I added the show class to modal fade
• I added onclick attributes to handle the clicks. The modal will appear on page load without these onclick attributes as well, but for the sake of this example I preferred to make it more functional
• I added an id to the modal to make sure my CSS rule is applied to it and only it

#exampleModal.show {
  display: block;
  background-color: rgba(100, 100, 100, 0.4);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
      Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade show" onclick="$(this).hide();" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" onclick="event.stopPropagation();">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

Answer 2

Apparently it's not a problem to introduce scripts with Qweb (or simply include it in your markup). I see no reason to deviate from best practice using Bootstrap's methods. Doing so should result in basically this (note the embedded script located after the Bootstrap library link):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

<script>
const myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
myModal.show();
</script>