Modals
<blockquote>
"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."<br><a href="https://en.wikipedia.org/wiki/Modal_window">("Modal Window" - Wikipedia)</a>
</blockquote>
{[
<div class="modal">
<div class="modal-content">
<span class="close">
{(link-repeat: "×")[(replace: ?modal)[] ]}
</span>
Some text in the Modal..
</div>
</div>
](modal|}
(link-repeat:"Open Modal!")[(show:?modal)]There are many ways to open new "windows" using browser functionality in Twine. The first is the //`(alert:)`// macro.
For example:
(link: "Trigger an alert box!")[(alert:"Hi! I'm an alert.")]
A second, and more traditional approach, is the //`(confirm:)`// window.
For example:
(link: "Ask for confirmation!")[(set: $result to (confirm: "Did you mean to open this?"))]
A third, and sometimes very useful for getting player input, is //`(prompt:)`//.
For example:
(link: "Ask the user for a string!")[(set: $result to (prompt: "Enter something:", "Default Value"))]
[[Styled Modal]]