Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 28, 2019 at 1:23 pm #1151729
    missulli

    Dear Enfold-Support-Team,

    I try to create a lightbox popup with content and got stuck! Could you please help me to find the solution?

    Here are the steps that I followed:
    – Add code to the functions.php (please find the exact code below this message)
    – Create New page / Add Text Block / Put in text „Click this Link“ / Edit this text into „Click this Link“  (with blanks inbetween: < a href = ” # demopop ” > Click this Link < / a > )
    – Add Color section / Edit the Section ID („demopop“) and CSS class („mfp-hide“)
    – Add Textblock to the Color Section, Put in text that you want to show in the popup
    – Save, Publish

    I did everything as described, but if I click on „Click this Link“ there is no popup showing, only #demopop is added to the URL.
    What did I do wrong and what can I do to solve this?

    ________

    This is the code I added to functions.php in my Child Theme:

    //——————————
    // php – Lightbox Popup with content
    //——————————

    function inline_popup_enabler(){
    ?>
    <script>
    (function($){
    $(window).load(function() {
    $(‘.inline_popup’).magnificPopup({
    type:’inline’,
    midClick: true
    });
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘inline_popup_enabler’);

    • This topic was modified 5 years ago by missulli.
    October 29, 2019 at 11:51 am #1152031
    Ismael

    Hey Juli,

    Thank you for the update.

    We found an error in the console generated by a third party lightbox plugin. Did you install a different lightbox plugin? 

    ecurityError: The operation is insecure. embed:28
    <anonymous> https://kriesi.at/support/topic/lightbox-popup-with-content/embed/#?secret=mrA09NI4JN:

    Please try to disable the plugin temporarily, then make sure that the theme’s Lightbox Modal Window option is activated.

    Best regards,
    Ismael

    October 29, 2019 at 2:51 pm #1152069
    missulli

    Hey Ismael,

    I deleted the only popup plugin I found, emptied the cache and Lightbox Modal Window is activated in theme options.
    Unfortunately it is still not working :-( Do you have another idea?

    Best regards
    Juli

    • This reply was modified 5 years ago by missulli.
    October 30, 2019 at 2:50 pm #1152361
    Ismael

    Hi,

    Thank you for the update.

    You forgot to apply an id to the color section element containing the contact form, so we added “demo-popup” in the Section ID field. The section is now opening inside a lightbox when the “inline_popup” link is clicked.

    Use this css code if you want to adjust the maximum width of the lightbox container.

    .mfp-content {
	max-width: 85vw;
}

    Best regards,
    Ismael

    October 30, 2019 at 3:08 pm #1152376
    missulli

    Thank you very much, Ismael!!
    Yey, it finally works!

    Could you please explain me how I can add this function
    Schließen
    to a button to close the lightbox popup?

    Best regards
    Juli

    • This reply was modified 5 years ago by missulli.
    October 31, 2019 at 6:57 pm #1152826
    Ismael

    Hi,

    You’re welcome! Glad it’s finally working.

    We can’t seem to open the link above. Please add it again, or kindy open another thread so that we can close the thread, keep it short and relevant to the original topic. Thank you.

    Best regards,
    Ismael

    November 1, 2019 at 2:07 am #1152903
    missulli

    Hi Ismael,

    sorry about that: I included the working link into the text on this website (link in private content box).
    You can find the link to the lightbox popup at the bottom of this page in „Ich habe die allgemeinen Anmeldebedingungen gelesen und akzeptiere diese.“ If you click on it it opens the popup with a huge „Schließen“ (= close the page) on the top right. I would love to change this to a small button at the end of the page or at least change the size and position of this text.
    How can I do that?

    Best regards
    Juli

    November 8, 2019 at 3:43 am #1154818
    Ismael

    Hi,

    Sorry for the delay. You should be able to replace the default text with a close (x) icon using this css code.

    .btn-default.mfp-close {
	text-indent: -9999px;
        right: -100px;
        overflow: visible;
}

.btn-default.mfp-close::before {
	content: 'x';
	position: absolute;
	top: 0;
	left: 0;
	color: blue;
	width: 40px;
	height: 40px;
	font-size: 16px;
	text-indent: 0;
}

    If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

    Thanks!

    Best regards,
    Ismael

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