https://github.com/aiiddqd/modaler

Popups, Modal, Offcanvas, Float Sidebars for Gutenberg based web sites, by Bootstrap CSS & Vite JS
https://github.com/aiiddqd/modaler

aside bootstrap gutenberg modal offcanvas vitejs wordpress

Last synced: about 7 hours ago
JSON representation

Popups, Modal, Offcanvas, Float Sidebars for Gutenberg based web sites, by Bootstrap CSS & Vite JS

• Host: GitHub
• URL: https://github.com/aiiddqd/modaler
• Owner: aiiddqd
• License: mit
• Created: 2023-01-28T12:01:53.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-28T15:50:18.000Z (almost 2 years ago)
• Last Synced: 2024-05-10T18:28:42.216Z (8 months ago)
• Topics: aside, bootstrap, gutenberg, modal, offcanvas, vitejs, wordpress
• Language: PHP
• Homepage: https://wpcraft.ru/blog/modal-offcanvas-wordpress-gutenberg/
• Size: 120 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# modaler

Popups, Modal, Offcanvas, Float Sidebars for Gutenberg based web sites, by Vite & Bootstrap

Popular design patterns.

Examples by Amazon, GitHub, Bootstrap https://github.com/uptimizt/modaler/labels/examples

![Popup, Modal & Offcanvas](/.github/demo.jpg)

# used 2 components from Bootstrap:

- Modal https://getbootstrap.com/docs/5.3/components/modal/

- Offcanvas https://getbootstrap.com/docs/5.3/components/offcanvas/

# design patterns

- modal and popup windows for site https://github.com/uptimizt/modaler/issues/1

- offcanvas sidebars like Amazon Navigation or Notion https://github.com/uptimizt/modaler/issues/2

# how it works?

## add layouts

- in menu - Modaler

- remember post id

## add shortcode

for exmple 

- `[modaler a=#modal-58490]` - modal render for post id 58490

- `[modaler a=#offcanvas-58490]` - offcanvas render for post id 58490

after that, you just need add hash to any link or buttons block: `some link` or `some link`

## result

click on link or button and open content in modal or offcanvas

# roadmap

## phase 1

- MVP

- tests for some cases

## phase 2

- improve styles

- add options and hooks