wckd
THIS IS WCKD ™
   

Early Access

Overlays

Popup window with a few options.

Modal Example

<div>
	<button class="wckd-overlay">Open modal</button>
	<div class="wckd-overlay-content modal">
		<div class="pad">
			Your content
		</div>
	</div>
</div>
Your content

Flyout with Group Example

<div>
	<button class="wckd-overlay">Open Flyout 1</button>
	<div class="wckd-overlay-content flyout" data-overlay-group="group">
		<div class="pad">
			Your content 1
		</div>
	</div>
</div>

<div class="pad-top-tight">
	<button class="wckd-overlay">Open Flyout 2</button>
	<div class="wckd-overlay-content flyout" data-overlay-group="group">
		<div class="pad">
			Your content 2
		</div>
	</div>
</div>
Your content 1
Your content 2

Overlays HTML Structure

  • section
    • div
      • button.overlay
      • wckd-overlay-content.[modal, flyout]

Overlays Options

modal
flyout
flyout-top

Dev Note

  • Overlay being inside a .columns container restricts its position relative to the parent container.

Updates

  • Sep 20, 2024: Added functionality to disable default navigation behaviour for a href="#" tags with the .wckd-overlay class, treating them like buttons for triggering overlays.