In user interface design for computer applications, a modal window is a graphical control element subordinate to an application's main window. It creates a mode that disables the main window, but keeps it visible with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application. This avoids interrupting the workflow on the main window. Modal windows are sometimes called heavy windows or modal dialogs because they often display a dialog box.
</p>
<p>Let's look at some modal examples:</p><br/>
<canvasid="canvas"class="interactive"></canvas>
<p>
What you should see: Some buttons whichs starts different modal dialogs.
</p>
<scriptclass="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250,
transparent: false,
backgroundColor: 0xaa2211,
theme: 'light'
}).setup().run()
let button1 = new Button({
x: 10,
y: 10,
label: 'Modal',
action: e => {
const modal = new Modal({app: app})
app.scene.addChild(modal)
}
})
let button2 = new Button({
x: 100,
y: 10,
label: 'Modal mit Inhalt',
action: e => {
const modal = new Modal({
app: app,
closeOnBackground: false,
backgroundFillAlpha: .3,
header: 'Dies ist die Überschrift',
content: 'Und dies ist der Fließtext.'
})
app.scene.addChild(modal)
}
})
let button3 = new Button({
x: 270,
y: 10,
label: 'Modal mit Fließtext',
action: e => {
const modal = new Modal({
app: app,
maxWidth: 400,
header: 'Modal mit langem Fließtext',
content: 'Die Relativitätstheorie befasst sich mit der Struktur von Raum und Zeit sowie mit dem Wesen der Gravitation. Sie besteht aus zwei maßgeblich von Albert Einstein geschaffenen physikalischen Theorien, der 1905 veröffentlichten speziellen Relativitätstheorie und der 1916 abgeschlossenen allgemeinen Relativitätstheorie. Die spezielle Relativitätstheorie beschreibt das Verhalten von Raum und Zeit aus der Sicht von Beobachtern, die sich relativ zueinander bewegen, und die damit verbundenen Phänomene.'
})
app.scene.addChild(modal)
}
})
let button4 = new Button({
x: 470,
y: 10,
label: 'Modal nur Fließtext',
action: e => {
const modal = new Modal({
app: app,
maxWidth: 600,
content: 'Die Relativitätstheorie befasst sich mit der Struktur von Raum und Zeit sowie mit dem Wesen der Gravitation. Sie besteht aus zwei maßgeblich von Albert Einstein geschaffenen physikalischen Theorien, der 1905 veröffentlichten speziellen Relativitätstheorie und der 1916 abgeschlossenen allgemeinen Relativitätstheorie. Die spezielle Relativitätstheorie beschreibt das Verhalten von Raum und Zeit aus der Sicht von Beobachtern, die sich relativ zueinander bewegen, und die damit verbundenen Phänomene.'
})
app.scene.addChild(modal)
}
})
let button5 = new Button({
x: 10,
y: 70,
label: 'Modal mit Button',
action: e => {
const modal = new Modal({
app: app,
header: 'Modal mit Button',
content: 'Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.',
