Scrollable Dialog Demo

1. Acceptance of Terms

By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service.

These terms may be updated from time to time without notice. It is your responsibility to review these terms regularly.

2. Use License

Permission is granted to temporarily download one copy of the materials for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title.

Under this license you may not:

modify or copy the materials
use the materials for any commercial purpose or for any public display
attempt to reverse engineer any software contained on our service
remove any copyright or other proprietary notations from the materials

3. Disclaimer

The materials on our service are provided on an 'as is' basis. We make no warranties, expressed or implied, and hereby disclaim and negate all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.

4. Limitations

In no event shall our company or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on our service, even if we or our authorized representative has been notified orally or in writing of the possibility of such damage. Because some jurisdictions do not allow limitations on implied warranties, or limitations of liability for consequential or incidental damages, these limitations may not apply to you.

5. Privacy Policy

Your privacy is important to us. Our Privacy Policy explains how we collect, use, and protect your information when you use our service. By using our service, you agree to the collection and use of information in accordance with our Privacy Policy.

6. Contact Information

If you have any questions about these Terms of Service, please contact us at:

Email: legal@example.com
Phone: +1 (555) 123-4567
Address: 123 Main Street, Suite 100, City, State 12345

Opening Dialogs

Use the global PM7 object to programmatically control dialogs:

// Open a dialog
window.PM7.openDialog('dialog-id');

// Close a dialog
window.PM7.closeDialog('dialog-id');

// Toggle a dialog
window.PM7.toggleDialog('dialog-id');
        

Dialog Attributes

Configure dialogs using data attributes:

data-pm7-dialog="unique-id"       // Required: Dialog identifier
data-pm7-dialog-size="md"         // Size: sm, md, lg, xl, full
data-pm7-show-close               // Show close button
data-pm7-close-on-escape          // Close on Escape key
data-pm7-close-on-backdrop        // Close on backdrop click
        

Dialog Structure

Dialogs support three main sections:

<div class="pm7-dialog" data-pm7-dialog="my-dialog">
  <div data-pm7-header
       data-pm7-dialog-title="Title"
       data-pm7-dialog-subtitle="Subtitle"
       data-pm7-header-separator>
  </div>
  <div data-pm7-body data-pm7-scrollable>
    <!-- Content -->
  </div>
  <div data-pm7-footer data-pm7-footer-justify="flex-end">
    <!-- Actions -->
  </div>
</div>
        

Events

Listen for dialog events:

// Dialog opened
document.addEventListener('pm7:dialog:open', (e) => {
  console.log('Dialog opened:', e.detail.id);
});

// Dialog closed
document.addEventListener('pm7:dialog:close', (e) => {
  console.log('Dialog closed:', e.detail.id);
});
        

Scrollable Dialogs