-
AuthorPosts
-
June 14, 2024 at 7:44 am #1450227
All I need is a way to click on a text link, and have a floating window with content pop up. And then close when you click the “X” at the top. And ideas on how to do this?
I saw this on https://momcozy.com/checkout at the bottom left. There are “link texts” that when you click on one like “Refund Policy”, a window with text info pops up and then you can click it closed.
Thanks!
June 14, 2024 at 1:02 pm #1450418Hey bemodesign,
Thank you for the inquiry.
You can use the theme’s default lightbox to open inline content. Please check the links below for examples:
// https://kriesi.at/support/topic/popup-window-3/#post-1337540
// https://kriesi.at/support/topic/code-snippet-inline-post-content-popup-magnific-popup-shortcode/
// https://kriesi.at/support/topic/pop-up-feature/#post-1395322
// https://kriesi.at/support/topic/team-member-element-open-team-member-description-in-lightbox/#post-1354989Best regards,
IsmaelJune 14, 2024 at 8:24 pm #1450584Thanks but These links don’t show any examples at all. I don’t need an image or lightbox popup. I just need when you click on a text link, a window pops up with a page full of text, and then an “X” at the top right to close it. Any ideas on this?
- This reply was modified 3 days, 17 hours ago by bemodesign.
June 15, 2024 at 2:04 pm #1450609Hi,
To me your example page the popup:
is the same as our lightbox popup examples, I think this solution would be the best one to follow, it uses buttons but with a minor adjustment it could use plan text links, you can see that the popup has the “X” to close, in the screenshot there is only two words, but you can add as much text as you like:
In your example page there are five links and popups:
Are you going to use this in the same way? If so how many popups do you want to use?Best regards,
MikeJune 15, 2024 at 10:59 pm #1450787Hi,
This is an example with using text elements to hold the text for each popup and the script in a code block element that automatically numbers each box and link so you can add as many popup boxes as you wish. The boxes and links are number from the top down so the first link on the page will open the first box on the page.
For this example this is how the backend looks:
you can add the text elements anywhere on your page, top or bottom it doesn’t matter because they will not show on the frontend.
Each text element will have the custom classes: multi-popup mfp-hide
notice that the classes have no dots and the space between them.
Then in your code block element add this code:<script> window.addEventListener('DOMContentLoaded', function() { (function($) { function assignUniqueIDs() { $('.multi-popup').each(function(index) { var uniqueID = 'multi-popup-' + (index + 1); $(this).attr('id', uniqueID); }); $('.multi-popup-link').each(function(index) { var uniqueID = 'multi-popup-' + (index + 1); $(this).attr('href', '#' + uniqueID); }); } assignUniqueIDs(); $('.multi-popup-link').magnificPopup({ type: 'inline', midClick: true }); })(jQuery); }); </script> <style> .multi-popup { position: relative; background: #FFF; padding: 20px; width: auto; max-width: 500px; margin: 20px auto; } </style> <a class="multi-popup-link" href="#">Link to box one</a></br> <a class="multi-popup-link" href="#">Link to box two</a></br> <a class="multi-popup-link" href="#">Link to box three</a></br> <a class="multi-popup-link" href="#">Link to box four</a></br>
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
notice the four links at the bottom, you can add these in a different element if you wish, this is to show you the custom class that the links must have.
then on the frontend when you click a link the popup box will show:
Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.