How to create two seperate modals in Panel?

Panel
,
1

I am trying to create two independent modals in Panel’s bootstrap, I encounter two issues:

  1. Both modals are not displaying any content in it.
  2. Not sure they are the same or different modal, since no content rendered.

Could anyone show me where went wrong of my codes? And how to create two independent modals in Panel?

import panel as pn

pn.extension()

ui = pn.template.BootstrapTemplate(name='Two Modals')
modal_1_content = pn.Row(pn.widgets.Select(options=[1, 2, 3]), pn.pane.Markdown('## Modal 1'))
modal_2_content = pn.Row(pn.widgets.Select(options=[5, 6, 7]), pn.pane.Markdown('## Modal 2'))

def show_modal_1(event):
    ui.modal.clear()
    ui.modal.append(modal_1_content)
    ui.open_modal()

def show_modal_2(event):
    ui.modal.clear()
    ui.modal.append(modal_2_content)
    ui.open_modal()


button_modal_1 = pn.widgets.Button(name='Modal 1')
button_modal_2 = pn.widgets.Button(name='Modal 2')

button_modal_1.on_click(show_modal_1)
button_modal_2.on_click(show_modal_2)

ui.main.append(pn.Row(button_modal_1, button_modal_2))


ui.servable()
ui.show()
2

Hi @erpang,

I remember a solution posted by @maximlt with some good explanation how it all works, I think you almost had the idea but what you wanted to do I think is add an empty column to the modal so this could be modified on the fly. I’ve adapted your code to this that I recall hope it helps and when I find the link I’ll add it in

import panel as pn
pn.extension()

ui = pn.template.BootstrapTemplate(name='Two Modals')
modal_1_content = pn.Row(pn.widgets.Select(options=[1, 2, 3]), pn.pane.Markdown('## Modal 1'))
modal_2_content = pn.Row(pn.widgets.Select(options=[5, 6, 7]), pn.pane.Markdown('## Modal 2'))

# Add an empty Column
ui.modal.append(pn.Column())

def show_modal_1(event):
    #print("I got here")
    ui.modal[0].clear()
    ui.modal[0].append(modal_1_content)
    
    ui.open_modal()

def show_modal_2(event):
    ui.modal[0].clear()
    ui.modal[0].append(modal_2_content)
    ui.open_modal()

button_modal_1 = pn.widgets.Button(name='Modal 1')
button_modal_2 = pn.widgets.Button(name='Modal 2')

button_modal_1.on_click(show_modal_1)
button_modal_2.on_click(show_modal_2)

ui.main.append(pn.Row(button_modal_1, button_modal_2))


#ui.servable()
ui.show()

https://discourse.holoviz.org/t/can-i-use-create-a-modal-dialog-in-panel/1207/12

2 Likes