I have my popup positioned so it stays static near the top

I have my popup positioned so it stays static near the top right of my website and it stays there while I scroll down the page. My issue is everything behind the popup is dimmed and not accessible until I close the popup. How can I set it so the website page is active and accessible while the popup stays on the screen?

  • Tyler Postle

    Hey Broscottcho,

    Hope you're doing well today and thanks for your question!

    The reason nothing is clickable is because even though the Popup might only 400px wide or whatever you have it, the container still spans across the whole page. We can change this with some CSS though :slight_smile:

    .wdpu-container.wdpu-244 {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
      width: 700px;
    }

    If you only have 1 pop up then you don't need the wdpu-244 specific class - that class is only for one of my Popups. If you have multiple popups then you will want to find out what the specific class is for the one you are wanting to customize here. You can do that my right clicking and inspecting the element :slight_smile: you should see a class similar to mine above.

    Adjust the width as needed. Normally we don't want to use the "!important" declaration; however, sometimes it can be a necessary evil.

    if you don't have a custom stylesheet to add this then use this plugin here: https://wordpress.org/plugins/simple-custom-css/

    Let us know if you need any further assistance!

    All the best,
    Tyler

  • Scott

    Awesome, thanks Tyler! I am almost there now. I am messing around with that and I am seeing the background move and change with various settings but it seems to be interfering with my positioning of the popup.

    I have this code in my functions.php.

    function custom_position( $default, $popup_id ) {
    	switch ( $popup_id ) {
    		// ID 0 = preview in PopUp Editor.
    		case 0: return array( 'top' => 0 ); // left/right are undefined which means "centered"
    
    		// PopUp with ID 13983
    		case 13983: return array( 'top' => '100px', 'left' => '65%' ); //in top right corner
    
    		// All other PopUps
    		default: return array( 'left' => '0' ); // at the left side, vertically centered
    	}
    	// No return value means default (centered on screen)
    }
    add_filter( 'popup-template-position', 'custom_position', 10, 2 );

    I have this code in my style.css.

    .wdpu-container.wdpu-13983 {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
      width: 450px;
    }

    Do you think something like that should work or do I need to add in positioning on the css also?

    Sorry, I am certainly not into css.

    Thanks for your help!

  • Scott

    I have been trying to get this to work with the css and trying some positioning but I keep getting weird scroll bars. The container size looks like it might be correct but the popup is not centered in it which is why the scroll bars are there. I have attached a screenshot.

    As a side note the last couple questions I have put in, the system has automatically renamed the title to the first sentence of the question making it look like a weird question with that title.

  • Tyler Postle

    Hey BroScottcho,

    Thanks for your reply!

    Okay, here's some CSS that should work for ya:

    .wdpu-container.wdpu-13983 {
    overflow: visible !important;
    left: 65% !important;
    top: 100px !important;
    }
    
    .wdpu-13983 .wdpu-buttons {
    height: 75px !important;
    }
    
    .wdpu-13983 .wdpu-msg.resize {
        left: 0 !important;
    	top: 0 !important;
    }

    This should put it in the top right corner :slight_smile: 65% in from the left.

    The Popup CSS ID's are dynamic, they can change each browser session so instead we targeted the classes; however, ID's hold priority over classes, which is why we needed to add the "!important" declaration onto all of those. As mentioned earlier, normally you wouldn't want to do that, but in this case we didn't have much choice.

    I made it so it's linked to the specific Popup class, so those classes won't apply to any of your other popups, if you have any :slight_smile:

    I'm assuming you already have a custom CSS sheet, but in-case anyone else is following this thread and wants to know where to place the CSS they can use this plugin: https://wordpress.org/plugins/simple-custom-css/

    As a side note the last couple questions I have put in, the system has automatically renamed the title to the first sentence of the question making it look like a weird question with that title.

    Thanks for mentioning this, are you creating your tickets from the WPMU DEV Dashboard by any chance?

    Look forward to hearing back!

    All the best,
    Tyler

  • Tyler Postle

    Actually, just to add on here.

    Instead of this part:

    .wdpu-13983 .wdpu-msg.resize {
        left: 0 !important;
    	top: 0 !important;
    }

    You can just remove this section of your function:

    // PopUp with ID 13983
    		case 13983: return array( 'top' => '100px', 'left' => '65%' ); //in top right corner

    It's applying the CSS but it's applying it to the content inside the container. Which is why it was pushed off the screen before - you want to apply that to the container :slight_smile: which is what this section of CSS does:

    .wdpu-container.wdpu-13983 {
    overflow: visible !important;
    left: 65% !important;
    top: 100px !important
    }

    I'm not very good at php yet, so it's lucky this question wasn't the other way around :p

    Hope this helps BroScottcho!

    Cheers,
    Tyler

  • Scott

    Tyler, I cannot thank you enough, it works! I have sure learned a bunch about css in the process and your explanation of the container is better than I found when searching.

    Thanks for mentioning this, are you creating your tickets from the WPMU DEV Dashboard by any chance?

    It was actually from the website here. I will pay much closer attention next time I need to ask a question to see if I can see what is going on or possibly it is user error.

    Thank you again! Marking as resolved.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.