Pageblock Modals

Getting Started with Pageblock Modals

The Pageblock Modal system allows you to add beautiful, accessible modal dialogs to your Webflow site with minimal effort. Follow these simple steps to implement modals with various animations and layouts.

Step 1: Add Required Code

Add the following code to your Webflow site's custom code sections:In the Head section:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pageblock/[email protected]/dist/modal.css">

Before the closing body tag:

<script type="module">
  import { Modal } from 'https://cdn.jsdelivr.net/npm/@pageblock/[email protected]/dist/modal.js';
  const modal = new Modal();
</script>

Step 2: Add Modal HTML Structure

Add this HTML structure at the end of your page using the Embed element:

<!-- Modal Container -->
<pageblock-modal data-modal-id="my-modal" data-animation="zoom">
  <!-- Modal Overlay -->
  <div data-pb-modal="overlay"></div>
  
  <!-- Modal Content -->
  <div data-pb-modal="sheet">
    <button data-pb-modal="close" aria-label="Close modal">×</button>
    <div style="padding: 2rem;">
      <h2>Modal Title</h2>
      <p>Your content here...</p>
      <button data-pb-modal="close">Close</button>
    </div>
  </div>
</pageblock-modal>

Step 3: Add Trigger Elements

Add this attribute to any button or link that should open the modal:

<button data-pb-modal-trigger="my-modal">Open Modal</button>

Or for a link:

<a href="#" data-pb-modal-trigger="my-modal">Open Modal</a>

Animation Options

The modal component supports various animation types. Simply change the data-animation attribute:

• fade - Simple fade in/out (default)

• zoom - Scale in/out with fade

• slide-up - Slide up from bottom

• slide-down - Slide down from top

• slide-left - Slide in from left

• slide-right - Slide in from right

Example:

<pageblock-modal data-modal-id="my-modal" data-animation="slide-up">
  <!-- Modal content -->
</pageblock-modal>

Layout Variants

Different layout variants for various use cases. Change the data-variant attribute:

• Default - Centered modal (no attribute needed)

• bottom-sheet - Full-width panel from bottom

• side-panel - Panel sliding from right

• left-panel - Panel sliding from left

• mobile-full - Full screen on mobile devices

<pageblock-modal data-modal-id="my-modal" data-variant="bottom-sheet">
  <!-- Modal content -->
</pageblock-modal>

Tracking Modal Events

You can track when modals are opened or closed for analytics:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('pageblock-modal').forEach(modal => {
      modal.addEventListener('modal:opened', function(event) {
        console.log(`Modal opened: ${event.detail.modalId}`);
        // Add your analytics code here
      });
      
      modal.addEventListener('modal:closed', function(event) {
        console.log(`Modal closed: ${event.detail.modalId}`);
        // Add your analytics code here
      });
    });
  });
</script>

Customizing Modal Appearance

You can customize the appearance of your modals using CSS variables. Add this to your site's custom code:

:root {
  /* Animation settings */
  --modal-animation-duration: 0.3s;
  --modal-animation-easing: cubic-bezier(0.22, 1, 0.36, 1);
  
  /* Overlay settings */
  --modal-overlay-bg: rgba(0, 0, 0, 0.35);
  --modal-overlay-blur: 5px;
  
  /* Modal styling */
  --modal-bg: #fff;
  --modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.08);
  --modal-border-radius: 16px;
  --modal-max-width: 500px;
  --modal-side-panel-width: 400px;
}

Accessibility Features

The modal component includes several accessibility features:

• ARIA attributes for screen readers

• Focus trapping within the modal

• Focus restoration when modal closes

• Keyboard navigation (ESC to close, tab trapping)

• High contrast focus styles

Multiple Modals

You can have multiple modals on the same page. Just make sure each has a unique ID:

<pageblock-modal data-modal-id="modal-1">
  <!-- First modal content -->
</pageblock-modal>

<pageblock-modal data-modal-id="modal-2">
  <!-- Second modal content -->
</pageblock-modal>

<button data-pb-modal-trigger="modal-1">Open First Modal</button>
<button data-pb-modal-trigger="modal-2">Open Second Modal</button>

Common Use Cases

• Contact Forms: Create a contact form that appears in a modal

• Image Galleries: Show larger images in a modal when thumbnails are clicked

• Newsletter Signup: Display a newsletter signup form in a modal

• Cookie Consent: Show cookie consent notices in a bottom sheet modal

• Mobile Navigation: Create a side panel navigation for mobile devices