Floating text window, with Close option

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:

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

Hi,
We would need to see how you are using this, and where you want to use this. Perhaps you added it to your footer and now it is on all of your pages?
Please include an admin login in the Private Content area and explain were you want this to show show we can examine. Then example that I show only works on the page with the code block, but I added it to the page and not the footer or widget.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike