Modal - Form Widgets Documentation

Usage

HTML Structure

The modal requires a specific HTML structure: a container with fw-modal, and an inner fw-modal-dialog.

HTML

<!-- Trigger Button -->
<button id="openBtn" class="fw-btn">Open Modal</button>

<!-- Modal Structure -->
<div id="myModal" class="fw-modal">
  <div class="fw-modal-dialog">
    <div class="fw-modal-header">
      <h3 class="fw-modal-title">Modal Title</h3>
      <button class="fw-modal-close"><i class="fw-icon" data-icon="close"></i></button>
    </div>
    <div class="fw-modal-body">
      <p>Modal content goes here...</p>
    </div>
    <div class="fw-modal-footer">
      <button class="fw-btn" data-dismiss="modal">Close</button>
      <button class="fw-btn fw-btn-primary">Save Changes</button>
    </div>
  </div>
</div>

<script>
FormWidgets.init('#myModal', 'Modal', {
    trigger: '#openBtn'
});
</script>

Options

Option	Type	Default	Description
trigger	string	null	CSS selector for element(s) that should open the modal when clicked.
closeOnOverlay	boolean	true	Whether clicking the backdrop (overlay) closes the modal.
closeOnEsc	boolean	true	Whether pressing the Escape key closes the modal.

Data Attributes

Data Attribute	Equivalent Option	Example
data-trigger	`trigger`	`data-trigger="#myBtn"`
data-close-on-overlay	`closeOnOverlay`	`data-close-on-overlay="false"`

Methods

widget.open()

Opens the modal programmatically.

widget.close()

Closes the modal programmatically.

Features

Keyboard Support

Closes on ESC key. Focus is trapped within the modal for accessibility.

Sizes

Use classes fw-modal-sm, fw-modal-lg, or fw-modal-xl on the dialog element.

Backdrop

Clicking outside the dialog automatically closes it (configurable).

Animations

Smooth fade-in and slide-up animations for a polished feel.