Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • February 5, 2018 at 11:03 pm #908260
    elsrick91

    Greetings.

    Is there a way to have a button link to webpage that opens in a lightbox popup? From what I’ve reading in the Enfold threads I need an iframe and possibly a third party plugin.

    February 6, 2018 at 5:31 am #908349
    John Torvik

    Hey elsrick91,

    Please, can you explain your question better?

    Best regards,
    John Torvik

    February 6, 2018 at 9:26 pm #908823
    elsrick91

    Update: I found this article https://kriesi.at/support/topic/open-a-pop-up-by-clicking-on-a-block/ which seems to do the job. I put a sample link and it did work.

    A couple of questions about this feature:
    1. Is there a way to make this taller (height) on desktop?
    2. Is there a way to make this fit mobile phones better?
    3. I was wondering if there is way to have the Lightbox open and disable the background scroll for the webpage. Right now there are 2 scrolls. one for the lightbox and one for the main webpage. Any way to to disable the main webpage scroll?
    4. Is there a way to remove the top of page button on this page only?

    • This reply was modified 6 years, 9 months ago by elsrick91. Reason: Found semi-solution
    February 7, 2018 at 10:53 am #909004
    Victoria

    Hi elsrick91,

    This is not really theme related, we can help you adjust css but having a popup page on mobile is not a good idea. I think on mobile you should just allow users to just follow the link.

    Do you have a popup already? DO I have to complete all the fields to see it?

    Best regards,
    Victoria

    February 7, 2018 at 11:38 pm #909455
    elsrick91

    yes, it is on my site already. The “Click Me” Button under “Our Goal”. when you click on it a lightbox will open but it is the size of youtube video. anyway to make automatic resized to be larger and taller. It doesn’t open a pop up as much as it opens a new website link in the lightbox.

    update*
    I added this code and it changes things on desktop. Still working on find a mobile solution and making the background not scrollable. Any insight is helpful. I’m working with the plugin developer as well. 

    body .mfp-iframe-holder .mfp-content {
    max-width: 1200px;
}
    • This reply was modified 6 years, 9 months ago by elsrick91. Reason: update
    February 9, 2018 at 1:29 am #910073
    Ismael

    Hi,

    Thank you for the update. The links redirect to the booking page. Where can we find the “lighbox” link?

    Best regards,
    Ismael

    February 16, 2018 at 12:34 am #913033
    elsrick91

    Hi,
    On my end it opens a page in the ligthbox. Do you see it? Button screenshot below.

    February 17, 2018 at 8:53 am #913575
    Victoria

    Hi elsrick91,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .mfp-iframe-scaler iframe, .mfp-content {
    height: 80vh;
 }
}

    If you need further assistance please let us know.s

    Best regards,
    Victoria

    February 20, 2018 at 2:05 am #914612
    elsrick91

    that worked. anyway to disable the background menu scroll. if i scroll too far down it just keep scrolling? if not… ok.

    February 20, 2018 at 5:32 am #914686
    Ismael

    Hi,

    I still can’t find the button. Anyway, please add this css code.

    .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-bg {
    height: 100vh !important;
    overflow: hidden !important;
}

    Best regards,
    Ismael

    February 20, 2018 at 10:34 pm #915084
    elsrick91

    it didnt work. the button is right after out goal in the screenshot. I also made a video of what my request. see how if i keep scrolling it just goes up or down?

    February 21, 2018 at 6:20 am #915285
    Ismael

    Hi,

    Thank you for the update. The previous url is different, it has an extra “/b”. Please provide the login details in the private field.

    Best regards,
    Ismael

    February 21, 2018 at 11:09 pm #915764
    elsrick91

    sorry. here you go

    February 24, 2018 at 3:31 am #916946
    Ismael

    Hi,

    I’m sorry but this login credentials are not working. Please check it carefully.

    Best regards,
    Ismael

    February 26, 2018 at 8:31 pm #917965
    elsrick91

    Try this. Also I found an exmple of what i’m trying to do. If you look at the backend a lightbox opens on the webpage tool. The area is scrollable but the background is not. Let me know if that makes sense.

    February 27, 2018 at 7:37 am #918245
    Ismael

    Hi,

    Thank you for the update.

    We added this script in the functions.php file.

    add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
    function a() {
		$('html').addClass('iframe-close');
        $('body').on('click', '.mfp-iframe', function() {
			if($('.mfp-bg').length >= 1) {
				$('html').removeClass('iframe-close');
				$('html').addClass('iframe-open');
			} 
		});
		
		$('body').on('click', function() {
			setTimeout( function() {
				if($('.mfp-bg').length == 0) { 
					$('html').removeClass('iframe-open');
					$('html').addClass('iframe-close');
				}
			},500);		
		});
    }
	
	a(); 
})(jQuery);
</script>
<?php
}

    And adjusted the css codes.

    .iframe-open, .iframe-open .mfp-bg {
    height: 100vh !important;
    overflow: hidden !important;
}

.iframe-open .mfp-bg {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

    Best regards,
    Ismael

    February 28, 2018 at 2:36 am #918767
    elsrick91

    Thanks !! :)

    February 28, 2018 at 9:18 am #918867
    Ismael

    Hey!

    Glad we could help. Please feel free to open a new thread if you need anything else. :)

    Cheers!
    Ismael

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Button Link to lightbox webpage iframe’ is closed to new replies.