Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #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!

    #1450418
    #1450584

    Thanks 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.
    #1450609

    Hi,
    To me your example page the popup:
    Enfold Support 6089
    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:
    2022 01 27 004
    In your example page there are five links and popups:
    Enfold Support 6091
    Are you going to use this in the same way? If so how many popups do you want to use?

    Best regards,
    Mike

    #1450787

    Hi,
    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:
    Enfold Support 6099
    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
    Enfold Support 6101
    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.
    Enfold Support 6097
    then on the frontend when you click a link the popup box will show:
    Enfold Support 6105

    Best regards,
    Mike

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.