Example of a modal dialog using widgets

modal.py

from IPython.html.widgets import ContainerWidget, HTMLWidget, ButtonWidget
from IPython.display import display 

fade = ContainerWidget()

dialog = ContainerWidget()
fade.children = [dialog]

content = ContainerWidget()
dialog.children = [content]

header = ContainerWidget()
content.children = [header]

header_text = HTMLWidget(value='<h4 class="modal-title">Modal title</h4>')
header.children = [header_text]

body = ContainerWidget()
content.children = list(content.children) + [body]

body_text = HTMLWidget(value='<p>One fine body&hellip;</p>')
body.children = [body_text]

footer = ContainerWidget()
content.children = list(content.children) + [footer]

button = ButtonWidget(description="Close")
footer.children = [button]
display(fade)

fade.set_css('display', '')
fade.remove_class("widget-container vbox")
dialog.remove_class("widget-container vbox")
content.remove_class("widget-container vbox")
header.remove_class("widget-container vbox")
body.remove_class("widget-container vbox")
footer.remove_class("widget-container vbox")
fade.add_class("modal fade in")
dialog.add_class("modal-dialog")
content.add_class("modal-content")
header.add_class("modal-header")
body.add_class("modal-body")
footer.add_class("modal-footer") 

def close_click(sender):
    fade.visible = False
button.on_click(close_click)
fade.visible = True