How to display modal on application startup?

Panel
1

Hi everyone! I am struggling to serve this application with the modal on at application startup. Can you help me with it?

Here is the code:

import panel as pn
from panel_modal import Modal

pn.extension("modal")

login_button = pn.widgets.Button(name="Login")
modal_content = pn.Column(pn.pane.Markdown("login"), login_button)
modal = Modal(modal_content, show_close_button=False, is_open=True)

def close_modal(event):
    modal.is_open = False

login_button.on_click(close_modal)

main_content = pn.pane.Markdown('Main Content')
template = pn.template.BootstrapTemplate(title='My App')
template.main.append(main_content)
template.modal.append(modal)

template.show()
2

Right before show(), enter template.open_modal(), or if that doesn’t work, wrap it in pn.state.onload()

3

Thank you for the response! It is important to note and I missed that I wish to serve the app on hugging face.Unfortunately thought it didn’t work what you suggested I tried:

import panel as pn
from panel_modal import Modal

pn.extension("modal")

login_button = pn.widgets.Button(name="Login")
modal_content = pn.Column(pn.pane.Markdown("login"), login_button)
modal = Modal(modal_content, show_close_button=False, is_open=True)

def close_modal(event):
    modal.is_open = False

login_button.on_click(close_modal)

main_content = pn.pane.Markdown('Main Content')
template = pn.template.BootstrapTemplate(title='My App')
template.main.append(main_content)
template.modal.append(modal)
template.open_modal()
template.show()

and I tried:

import panel as pn
from panel_modal import Modal

pn.extension("modal")

login_button = pn.widgets.Button(name="Login")
modal_content = pn.Column(pn.pane.Markdown("login"), login_button)
modal = Modal(modal_content, show_close_button=False, is_open=True)

def close_modal(event):
    modal.is_open = False

login_button.on_click(close_modal)

main_content = pn.pane.Markdown('Main Content')
template = pn.template.BootstrapTemplate(title='My App')
template.main.append(main_content)
template.modal.append(modal)
pn.state.onload(modal)
template.show()

Maybe I didn’t understand what did you mean by wrapping it in pn.state.onload()

4

Example when you click Select station from map

Example:

5

template.open_modal should be in the callback.