1Super Code
<!-- Add to Head -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pageblock/[email protected]/dist/modal.css">
<!-- Add before </body> -->
<script type="module">
import { Modal } from 'https://cdn.jsdelivr.net/npm/@pageblock/[email protected]/dist/modal.js';
const modal = new Modal();
</script>
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.
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>
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>
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>
The modal component supports various animation types. Simply change the data-animation attribute:
Example:
<pageblock-modal data-modal-id="my-modal" data-animation="slide-up">
<!-- Modal content -->
</pageblock-modal>
Different layout variants for various use cases. Change the data-variant attribute:
<pageblock-modal data-modal-id="my-modal" data-variant="bottom-sheet">
<!-- Modal content -->
</pageblock-modal>
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>
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;
}
The modal component includes several accessibility features:
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>