Lightbox popup with content - Support | Kriesi.at

Tagged: lightbox popup

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
October 28, 2019 at 1:23 pm #1151729
missulli
Participant
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, 1 month ago by missulli.
October 29, 2019 at 11:51 am #1152031
Ismael
Moderator
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
Participant
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, 1 month ago by missulli.
October 30, 2019 at 2:50 pm #1152361
Ismael
Moderator
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
Participant
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, 1 month ago by missulli.
October 31, 2019 at 6:57 pm #1152826

Ismael
Moderator

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
Participant

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
Moderator
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.