Bootstrap Modal Element in Streamlit

🧩 Custom Components
1

Hello everyone!

I am trying to use bootstrap modal for visualizing images in a modal (pop up). I followed this template code but it is not working well with displaying of modals for some reason.

I am able to incorporate other bootstrap components like accordians etc. but not modals…

def custom_image_model(imgpth: str = "./img/1.jpg"):
    return components.html(f"""
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <img src="{imgpth}" alt="NotFound">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
            </div>
        </div>
        </div>
        """, height=600)

Can someone please guide me on where it is that I am going wrong…

Thanks & Regards,
Vinayak.

2

Hi @ElisonSherton, welcome back!

I suspect the issue here is that modals are a pop-up, and Streamlit components run in their own iframe. So in this case, you are generating a popup in the wrong context (the iframe), where you want it in the outer container. There is no workaround for this currently through components.html, as we intentionally run that code in an iframe as a security design.

Best,
Randy

1 Like
3

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.