Can i use/create a modal/dialog in Panel?

Panel
21

it was easier than expected. overriding the click function and hiding the x button do thw work

import panel as pn
import numpy as np
import holoviews as hv
import time


html = pn.pane.HTML('')
btn_close = pn.widgets.Button(name = 'validate')

def update():
    html.object = """<script> 
                        window.onclick = function(){console.log('')};
                        close_btn =  mod = document.getElementsByClassName("pn-modal-close")[0]
                        close_btn.style = 'display:none;'
                    </script>"""

pn.state.onload(update)


pn.extension(sizing_mode='stretch_width')

freq = 2
phase=2*np.pi

xs = np.linspace(0, np.pi)
ys = np.tanh(xs*freq+phase)
zs = np.sin(xs*freq + phase)


fig1 = hv.Curve((xs, ys)).opts(title='fig1')
fig2 = hv.Curve((xs, zs)).opts(title='fig2')

app_bootstrap = pn.template.BootstrapTemplate(title='Bootstrap Template')
app_bootstrap.main.append(
    pn.Row(
        pn.Card(fig1, title='Hyperbolic Tangent'),
        pn.Card(fig2, title='Sine')
    )
)

text = pn.widgets.TextInput()

def close_modal(e):
    print (text.value)
    if text.value == 'close':
        html.object = """<script> 
                        modal.style.display = "none";
                    </script>"""
        time.sleep(0.1)
        text.value == " "
        html.object = " " 

btn_close.on_click(close_modal)

app_bootstrap.modal.append(pn.Column())

# Callback for fig1 button
def fig1_callback(event):
    # Clear and append to the Column instead to modal,
    # since one rendered it can no longer be updated.
    app_bootstrap.modal[0].clear()
    app_bootstrap.modal[0].append(pn.Column(text,btn_close))
    app_bootstrap.open_modal()

# Create, link and add the button to the sidebar
btn1= pn.widgets.Button(name="Figure 1")
btn1.on_click(fig1_callback)
app_bootstrap.sidebar.append(btn1)


app_bootstrap.sidebar.append(html)


app_bootstrap.servable()
2 Likes