Skip to content

"Modal (Pop-up Window)": Harlowe (v2.0)#


This example creates a re-usable modal window. It can be opened using the combination of (link-repeat:) and (replace:) to create the window in an existing hook, and be 'closed' using the same macros to remove the window. CSS rules are applied with (css:) to style the modal, and to change an enclosing hook into a "dimmer" which obscures the rest of the page.



Twee Code#

:: StoryTitle
Harlowe: Modal

:: Header[header]

:: Modal code
(replace: ?modalhooks)[{
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4);
    margin: 15% auto;
    padding: 20px;
    width: 80%;
    border: 1px solid white;
    (css:"float:right")+(link-repeat:"×")[(replace: ?modalhooks)[]]

:: Start
(link-repeat:"Open Modal!")[(display:"Modal code")(append:?modal)[Some text in the modal...]]

Twee Download