Created
January 6, 2023 14:56
-
-
Save jcicero518/1075320ee9a1cd02a16ce794c7c61a26 to your computer and use it in GitHub Desktop.
Tingle modal
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Tingle from 'tingle.js'; | |
| const modalTriggers = document.querySelectorAll('[data-micromodal-trigger="modal-search-popup"]'); | |
| const searchModal = new Tingle.modal({ | |
| footer: false, | |
| stickyFooter: false, | |
| closeMethods: ['overlay', 'button', 'escape'], | |
| closeLabel: "Close" | |
| }); | |
| const modalHtml = `<header class="modal__header"> | |
| <h2 class="modal__title" id="modal-search-popup--title"> | |
| Search Bethel Woods | |
| </h2> | |
| </header> | |
| <main class="modal__content" id="modal-search-popup--content"> | |
| <div class="btn search-bx"> | |
| <form accept-charset="UTF-8" action="/search/content" class="push-nav__search__form" data-drupal-form-fields="" method="get"> | |
| <div class="form__container"> | |
| <input name="keys" placeholder="search..." type="search" aria-label="site search"> | |
| <input class="modal__btn modal__btn-primary" name="submit" type="submit" value="Search" /> | |
| </div> | |
| </form> | |
| </div> | |
| </main>`; | |
| if (modalTriggers) { | |
| Array.from(modalTriggers).forEach(trigger => { | |
| trigger.addEventListener('click', () => { | |
| searchModal.setContent(modalHtml); | |
| searchModal.open(); | |
| }); | |
| }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment