Hello, all!

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.

Thanks for reply. Could you please clarify ? Especially how to embed document into a popup ?

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

Thank you. Will try to check it…

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)

CSS FILE*
.popup .popuptext {

justify-content: center;

justify-items: center;

visibility: hidden;

position: absolute;

width: 1000px;

height: 500px;

background-color: lightcyan;

color: black;

text-align: center;

border-radius: 6px;

padding: 8px 0;

z-index: 9;

bottom: 50px;

left: 150px;

margin-left: 80px;

}

/* Popup arrow */

.popup .popuptext::after {

position: absolute;

top: 100%;

left: 50%;

margin-left: -5px;

border-width: 5px;

border-style: solid;

border-color: #555 transparent transparent transparent;

}

/* 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 ****

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

Question, it it possible to show widgetboxes, but panels or other elements are not seen…only popup background color… any guess why ?