Leveraging Modal Functionality for Alerts

[Adam]

In order to stay consistent with over-the-screen pop-ups and alerts, including the login/forgot password modals, I’d like to try using the same elements for other custom alerts we have.

Right now I’m using a combination of javascript alert and slide-up banners here and there.

Is there a slick way to duplicate the login modal functionality with other pop-ups? (UI controlled by separate template, activated by data-reveal code on clickable element, etc.)

[Adam]

Pretty easy actually:

1. Create HTML template for modal in /page-parts/
2. ID the wrapper within the template “my_panel” or something
3. In your footer.php, include the template with get_template_part (in my case, wrapped with some conditionals
4. Whichever element is to trigger the loading of the modal, give it a data-reveal-id=”my_panel” (matching above)

[Adam]

For the content of the modal, I used get_post_field so we can control the HTML of the modal in the CMS
eg:
<?=get_post_field(post_content, 1901); ?>

[Adam]

Next question:

HOW TO TRIGGER MODAL WITHOUT CLICKING SOMETHING??

We want to pop this thing up when logged-in users log in next time.

I’ll set a cookie when the close button is clicked, to prevent loading the next time.

[Abe]

Hi Adam, since Sweetdate is built on Zurb Foundation 3.2.5 framework check their documentation on adding new modals http://foundation.zurb.com/docs/v/3.2.5/reveal.php

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Adam]

This can be closed – I found everything I needed at Foundation and just never returned to close this thread

[Author]

Posts