Display Modal on Page Load

🧩 Custom Components
1

Hello, I’m trying to display a modal when page load in a streamlit application. I have tried this example [GitHub - TangleSpace/hydralit_components: A package of custom components for Streamlit and Hydralit. Can be used directly or in combination with the Hydralit package.] but in the case of the example, the modal is displayed in button click, and my desire is that the modal displayed when page load.

Then I add a javascript event to show modal when page load, but the modal is displayed as part of the body and not overlaping the content.

I’m using the following:

import streamlit.components.v1 as components

modal_code =

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    </head>
        <body>
        <!-- Modal -->
        <div class="modal fade content-overlap" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen-xl-down">
            <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">
                <h2>Navegacion</h2>
                <p>Se recomienda utilizar filtros para navegar y ver los distintos Partners en el Mapa</p>
            </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>
     window.addEventListener('load', function() {{
     var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
     myModal.toggle()
     
     }})
     </script>
     
    </body>
    </html>

components.html(modal_code, height=500)

The issue with this code is that the modal, is not working because is not displayed as a modal. Is displayed as part of the body , and is pushing the content down.

Any advice, on how to display modal on page loading in Streamlit??
thanks

2

Hello, can someone provide some clue about this? or if it is a valid procedure with the actual tools of Streamlit?

thanks in advance.
Regards,