Text popup modal

A free Carrd plugin template for a text-based popup modal.

Tutorial

Here's what you need to do to reproduce this in your Carrd site:1. Add an Embed element above the Button element that's going to trigger the popup modal (Note: DO NOT add the Embed in another separate Section as the Section's settings will disable the popup). Label it popup trigger.
- Set Style to Hidden, Body Top
- Copy and paste the code from Embed element with the same name in the template2. Add a 2nd Embed element below the 1st Embed element. Label it popup modal.
- Set Style to Inline
- Copy and paste the code from Embed element with the same name in the template3. To trigger the text modal with a Button element, go to your chosen Button or add a new Button
- Set URL to #
- Copy and paste the code from the On Click field of the Button element in the template. The code looks like this:console.log("clicked");
triggerModal();4. Save and publish, done! When you click on the Button, the text modal should pop up.—5. To edit the modal, go to the "popup modal" Embed element. Edit the HTML (some familiarity with HTML will help here).
- To change the image, look for this:<div id="popup" class="modal">
<img src="https://images.unsplash.com/photo-1609010586352-ce4e725aa565?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="" class="team">- Replace the URL of src to a direct URL of an image you want6. To change the name/job title, look for<h3>Jane Doe</h3>
<br />
<p>Growth hacker</p>Edit the name within the <h3> tags, edit the job title within the <p> tags7. To edit the description, look for this HTML code:<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec neque placerat, ultrices nisi sit amet, pellentesque risus. Praesent ac tortor vitae mi placerat ultricies. Vestibulum auctor quis sem eu maximus. Nam dictum dictum neque.</p>- Edit the description within the <p> tags