171 lines
5.5 KiB
HTML
171 lines
5.5 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
|
||
|
|
<title>PIXI Modal</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
||
|
|
<link rel="stylesheet" href="../../css/doctest.css">
|
||
|
|
|
||
|
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||
|
|
<script src="../3rdparty/all.js"></script>
|
||
|
|
|
||
|
|
<script src="../all.js"></script>
|
||
|
|
<script src="./all.js"></script>
|
||
|
|
</head>
|
||
|
|
<body onload="Doctest.run()">
|
||
|
|
<h1>Modal</h1>
|
||
|
|
<p>
|
||
|
|
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 />
|
||
|
|
<canvas id="canvas" class="interactive"></canvas>
|
||
|
|
<p>
|
||
|
|
What you should see: Some buttons whichs starts different modal dialogs.
|
||
|
|
</p>
|
||
|
|
<script class="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.',
|
||
|
|
button: {label: 'OK', action: () => modal.hide()},
|
||
|
|
minWidth: 450,
|
||
|
|
maxWidth: 450,
|
||
|
|
closeButton: false
|
||
|
|
})
|
||
|
|
app.scene.addChild(modal)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
let button6 = new Button({
|
||
|
|
x: 190,
|
||
|
|
y: 70,
|
||
|
|
label: 'Modal mit ButtonGroup',
|
||
|
|
action: e => {
|
||
|
|
const modal = new Modal({
|
||
|
|
app: app,
|
||
|
|
header: 'Modal mit ButtonGroup',
|
||
|
|
content: 'Seit die Mathematiker über die Relativitätstheorie hergefallen sind, verstehe ich sie selbst nicht mehr.',
|
||
|
|
buttonGroup: {
|
||
|
|
buttons: [
|
||
|
|
{label: 'Abbrechen', action: e => modal.hide()},
|
||
|
|
{label: 'Anwenden'}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
minWidth: 450,
|
||
|
|
maxWidth: 450,
|
||
|
|
closeButton: false
|
||
|
|
})
|
||
|
|
app.scene.addChild(modal)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
let img = PIXI.Sprite.fromImage('./assets/modal-1.jpg')
|
||
|
|
img.scale.set(.2, .2)
|
||
|
|
|
||
|
|
let button7 = new Button({
|
||
|
|
x: 420,
|
||
|
|
y: 70,
|
||
|
|
label: 'Modal mit Foto',
|
||
|
|
action: e => {
|
||
|
|
const modal = new Modal({
|
||
|
|
app: app,
|
||
|
|
minWidth: 0,
|
||
|
|
padding: 0,
|
||
|
|
content: img,
|
||
|
|
closeButton: false,
|
||
|
|
closeOnPopup: true
|
||
|
|
})
|
||
|
|
app.scene.addChild(modal)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
let button8 = new Button({
|
||
|
|
x: 10,
|
||
|
|
y: 130,
|
||
|
|
label: 'App Modal',
|
||
|
|
action: e => {
|
||
|
|
let modal = app.modal({
|
||
|
|
header: 'Modal aus App gestartet',
|
||
|
|
content: 'Die größte Erfindung des menschlichen Geistes? - Die Zinseszinsen!',
|
||
|
|
minWidth: 80
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
app.scene.addChild(button1, button2, button3, button4)
|
||
|
|
app.scene.addChild(button5, button6, button7)
|
||
|
|
app.scene.addChild(button8)
|
||
|
|
</script>
|
||
|
|
</body>
|