this idea is implemented with a html pane, but it would be better done with the reactiveHTML element, so you can validate some data in client.
the css is extracted from
import panel as pn
import numpy as np
import holoviews as hv
import time
css = """
.modal-body{z-index :1010;}
"""
html = pn.pane.HTML('')
btn_close = pn.widgets.Button(name = 'validate')
def update():
html.object = """<script>
let div = document.createElement("div");
console.log("as")
</script>"""
html.object = """<script>
close_btn = mod = document.getElementsByClassName("pn-modal-close")[0]
close_btn.style = 'display:none;'
mod = document.getElementsByClassName("pn-modal")[0]
mod.insertBefore(div, mod.nextElementSibling);
console.log("as1")
</script>"""
html.object = """<script>
div.style = 'z-index: 1000; position: fixed; top: 0; left: 0; width: 100%;height: 100%;'
</script>"""
html.object = """<script>
mod.style = 'z-index: 1200;' ;
</script>"""
pn.state.onload(update)
pn.config.raw_css.append(css)
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()