"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.

Live Example

Download: Live Example

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...]]

Download: Twee Code

results matching ""

    No results matching ""