I have a question. There’s a need to create a kinda pop-up window. Preferrably it’s a bunch of models (textbox, button) which should be displayed with usual page in background. Example:
By now all I achieve is to create bunch of models (page) and I place them using add_root() function, but actually it is integrates the page into the host one, as app is running using Bokeh server. Thus it’s like like a hidden info with option to show or hide on event. Is there a possibily to show a bunch of model overlapping the host page like on the example photo above ? Any ideas ?
Thanks in advance
You can create an element off-screen and embed the relevant document there. And to show it, you’d just move the element back on screen. I’m not sure if you can do it with just some models from a document, but embedding a whole document in a popup is absolutely feasible.
A popup is just a regular DOM node within your main page that has been moved off-screen with CSS. Nothing special about it. And then you just embed a Bokeh document in it by using one of the approaches described in the documentation at Embedding Bokeh content — Bokeh 2.4.2 Documentation
If you want to embed it in a way that documentation does not describe, it may be possible but you will have to dig through BokehJS code. The main file of interest is bokeh/index.ts at branch-2.3 · bokeh/bokeh · GitHub
The task was solved by making a widgetbox in one of the app’s pages served by Bokeh server. Then template was supplied with corresponding CSS
PY file insert…
name_input = TextInput(placeholder=“Name”)
email_input = TextInput(placeholder=“Email”)
save_button = Button(label=“Save”, button_type=‘primary’, width = 50)
menu_popup = widgetbox(name_input, email_input, save_button, sizing_mode=‘scale_both’)
Adding name to control
menu_popup.name = “popup_menu” #Adding
for root in [… other widgetbox, menu_popup]:
doc.add_root(root)
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
**** HTML template ****
Subsribe here
<div class="popuptext" id="menu">{{ popup_menu | safe}}</div>
</div>
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("menu");
popup.classList.toggle("show");
}
</script>
