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

Summary

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.

Example

Download

Twee Code

:: StoryTitle
Harlowe: Modal

:: Header[header]
|modalhooks>[]

:: Modal code
(replace: ?modalhooks)[{
  (css:"
  position: fixed;
  display:block;
  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);
  ")[
  (css:"
    display:block;
    margin: 15% auto;
    padding: 20px;
    width: 80%;
    border: 1px solid white;
  ")|modal>[
    (css:"float:right")+(link-repeat:"×")[(replace: ?modalhooks)[]]
  ]
  ]
}]

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

Twee Download