I want to recieve click event of html integrated button

Using Streamlit
1

I’m trying to close a popup created in HTML format. I’ve added a button inside the popup, and I want it to trigger the close_popup function when clicked. How can I set it up so that the close_popup function is called when the “Got it” button is clicked?

Also, I want to close the browser tab with one separate button click. Is it possible to do that in a streamlit?

st.button(‘i’, key=‘info_button’, on_click=show_popup)
def show_popup():
st.session_state.popup_visible = True
if st.session_state.popup_visible:
st.markdown(‘’’



Instructions



Got it!


‘’', unsafe_allow_html=True)

2

If you want to have a frontend component with JavaScript (that doesn’t communicate with your Python backend), you can inject scripts with the components module:

import streamlit as st
from streamlit.component.v1 import html

html("<script> ... </script>")

However, from what you are describing, perhaps you can accomplish what you want with Streamlit dialogs so you don’t have to inject your own scripts.

3

thanks for response. using st.dialog method I didn’t get the desire output like I show it using HTML format but yes it works. One advantage of using st.dialog is that it provides the default close button so I don’t need to manage it separately.

Here is the code.
@st.dialog(“Instruction”)
def show_popup():
st.markdown(“”"
- instruciton goes here
“”")

4

Still I am looking for a solution to close the browser tab on “close window” button click.

5

For security reasons, JavaScript has some tight restrictions for closing a tab programmatically. It will only work under specific circumstances, so I can’t provide a general solution to that…

6

You can still render custom HTML within a dialog, depending on what exactly was missing from the dialog solution for you:

import streamlit as st

@st.dialog("My Popup")
def my_dialog():
    st.html("<p>My custom HTML.</p>")

if st.button("Open"):
    my_dialog()
7

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