Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 20, 2015 at 9:28 am #447004
    11digitLabs

    Hello guys! First of all, congrats on this great work you have done with the theme and with the support forums.

    I’ve searched around before posting this issue that I have, but didn’t find anything helpful.

    I need to create a popup centered in the screen.
    I have created a new color section with ID up-to-you and added the class mfp-hide
    Then, on a button I have created, I added a manual link to #up-to-you
    Unfortunately when I’m clicking on the button the popup appears but not horizontally centered.
    Can you please help?

    p.s. I’ve noticed that the magnific plugin is quite old, 2013 version

    Here is my code

    function popup_inline() { ?>
    <script type="text/javascript">
        jQuery(window).load(function () {
            jQuery('div.open-popup-link a').magnificPopup({
                type: 'inline',
                midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
            });
        });
    </script>
<?php }
add_action( 'wp_head', 'popup_inline' );
    .white-popup {
    background: #fff none repeat scroll 0 0;
    margin: 40px auto;
    max-width: 650px;
    padding: 20px 30px;
    position: relative;
    text-align: center;
}
    May 21, 2015 at 9:38 am #447626
    Rikard

    Hey 11digitLabs!

    Maybe you can use this instead?

    		function pop(url) {
			var left = (screen.width/2)-(500/2);
  			var top = (screen.height/2)-(300/2);
			if(screen.width>1024) 
			{
			popupWindow = window.open(
				url,'popUpWindow','height=300,width=500,left='+left+',top='+top+',resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes');
			} else {
				popupWindow = window.open(url);
			}
		}

    Or maybe this CSS will work:

    display:table;
margin:0 auto;

    Regards,
    Rikard

    • This reply was modified 9 years, 9 months ago by Rikard.
    May 21, 2015 at 6:41 pm #447920
    11digitLabs

    Sorry, but this is not what I asked.

    I’m talking about the magnific plugin here and im trying to display inline content in a popup/modal

    Please check my code and read it, you’ll understand :)

    May 22, 2015 at 8:40 pm #448612
    Josue

    Hi!

    You’re missing float: none, code should be:

    .white-popup {
	background: #fff none repeat scroll 0 0;
	margin: 10px auto;
	max-width: 650px;
	padding: 20px 30px;
	position: relative;
	text-align: center;
	float: none;
}

    Cheers!
    Josue

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