How to create two seperate modals in Panel?

Panel
,
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