Limitations of the "file" protocol

Frequently asked questions

Syntax, keywords and built-in functions

Standard distribution

import implementation

Brython packages

Browser interface

Introduction - DOM API
Creating a document
Accessing elements
Attributes, properties and methods

Mouse events
Keyboard events
Focus events
Drag events

Query string

Using Javascript objects and libraries

Brython-specific built-in modules




Working with Brython

Options of function brython()
Testing and debugging
Deploying an application


Hello world !
Insert content in an element
HTML markup (bold,italic...)
HTML table
Bind and unbind events
Handle options in a SELECT
Drag and drop
Get the content of an element
Read the content of a file
Store objects locally
Example of onmouseover


This module provides dialog boxes.


InfoDialog(title, message, *, top=None, left=None, default_css=True, remove_after=None, ok=False)
Displays a dialog box with an information message

  • title is the box title
  • message is the message to print
  • if top and left are provided, they are the position of the box relatively to the top and left borders of the visible part of the document. By default, the box is centered
  • default_css specifies if the style sheet provided by the module should be used. If set to False, the styles defined in the HTML page are used (cf. "CSS Style" below)
  • remove_after is the number of seconds after which the box is automatically closed
  • ok specifies if an "Ok" button should be present. If the value passed is a string, it will be printed in the button; if is is True, the string "Ok" is printed

from browser.widgets.dialog import InfoDialog

# Info box with customized "Ok" button
d1 = InfoDialog("Test", "Information message", ok="Got it")

from browser.widgets.dialog import InfoDialog

# Info box that disappears after 3 seconds
d1 = InfoDialog("Test", "Closing in 3 seconds", remove_after=3)

EntryDialog(title, message=None, *, top=None, left=None, default_css=True, ok=True)
Displays a dialog box with a prompt message and an entry zone. When the user hits the "Ok" button or the Entry key inside the entry zone, an event called "entry" is triggered on the EntryDialog instance.

  • title, top, left, default_css and ok are the same as for InfoDialog
  • message is the optional prompt message to print at the left of the entry zone

EntryDialog instances have an value, the string entered in the input zone. This value can used in the handler for event "entry".

from browser import bind
from browser.widgets.dialog import InfoDialog, EntryDialog

d = EntryDialog("Test", "Name")

@bind(d, "entry")
def entry(ev):
  value = d.value
  InfoDialog("Test", f"Hello, {value} !")

Dialog(title, *, top=None, left=None, default_css=True, ok_cancel=False)
Displays a generic dialog box, that can be completed by adding elements to its attribute panel

  • title, top, left and default_css are the same as above
  • ok_cancel specifies if buttons "Ok" and "Cancel" should be displayed. If the value passed is a 2-element list or tuple of strings, these stings will be printed in the buttons; if the value is True, strings "Ok" and "Cancel" are printed

Dialog instances have the following attributes:

  • panel : the DIV element where additional elements can be inserted to build the dialog box
  • ok_button : the "Ok" button, if present. An event handler should be defined for the "click" event

from browser import bind, html
from browser.widgets.dialog import Dialog, EntryDialog, InfoDialog

translations = {'Français': 'Salut', 'Español': 'Hola', 'Italiano': 'Ciao'}

d = Dialog("Test", ok_cancel=True)

style = dict(textAlign="center", paddingBottom="1em")

d.panel <= html.DIV("Name " + html.INPUT(), style=style)
d.panel <= html.DIV("Language " +
                    html.SELECT(html.OPTION(k) for k in translations),

# Event handler for "Ok" button
@bind(d.ok_button, "click")
def ok(ev):
  """InfoDialog with text depending on user entry, at the same position as the
  original box."""
  language = d.select_one("SELECT").value
  prompt = translations[language]
  name = d.select_one("INPUT").value
  left, top = d.scrolled_left, d.scrolled_top
  d3 = InfoDialog("Test", f"{prompt}, {name} !", left=left, top=top)

CSS Style

If the argument default_css passed to the menu is True, the following style sheet is inserted in the current HTML page:

:root {
    --brython-dialog-font-family: Arial;
    --brython-dialog-font-size: 100%;
    --brython-dialog-bgcolor: #fff;
    --brython-dialog-border-color: #000;
    --brython-dialog-title-bgcolor: CadetBlue;
    --brython-dialog-title-color: #fff;
    --brython-dialog-close-bgcolor: #fff;
    --brython-dialog-close-color: #000;

.brython-dialog-main {
    font-family: var(--brython-dialog-font-family);
    font-size: var(--brython-dialog-font-size);
    background-color: var(--brython-dialog-bgcolor);
    left: 10px;
    top: 10px;
    border-style: solid;
    border-color: var(--brython-dialog-border-color);
    border-width: 1px;
    z-index: 10;

.brython-dialog-title {
    background-color: var(--brython-dialog-title-bgcolor);
    color: var(--brython-dialog-title-color);
    border-style: solid;
    border-color: var(--brython-dialog-border-color);
    border-width: 0px 0px 1px 0px;
    padding: 0.4em;
    cursor: default;

.brython-dialog-close {
    float: right;
    background-color: var(--brython-dialog-close-bgcolor);
    color: var(--brython-dialog-close-color);
    cursor: default;
    padding: 0.1em;

.brython-dialog-panel {
    padding: 0.6em;

.brython-dialog-message {
    padding-right: 0.6em;

.brython-dialog-button {
    margin: 0.5em;

To customize dialog boxes, set default_css to False and redefine the CSS classes. The most staightforward is to copy the stylesheet above and edit it.

Dialog box elements and CSS styles

The different elements of a dialog box have the following properties and CSS classes:

property zone default CSS class
d the whole dialog box container brython-dialog-main
d.title_bar title bar brython-dialog-title
d.close_button close button, at the right of the title bar brython-dialog-close
d.panel zone below the title bar brython-dialog-panel
d.message message for InfoDialog or EntryDialog brython-dialog-message
d.ok_button "Ok" button brython-dialog-button
d.cancel_button "Cancel" button brython-dialog-button