Pop up close button disappeared / Elements of web page move slightly to right

I’m actually having thee exact same issue. It disappears when you mouseover the letters of the word however the button itself doesn’t function and doesn’t close it.

I want to amend that there is probably a 2 level issue here. It would appear the background is disappearing as it’s in the default CSS to do so but I’m having trouble overwriting it. The CSS specifically doing it is the following:
.pum-container, .pum-content, .pum-content + .pum-close, .pum-content + .pum-close:active, .pum-content + .pum-close:focus, .pum-content + .pum-close:hover, .pum-overlay, .pum-title

It has an element that is background-color: rgba(0,0,0,0); which is making the background vanish from sight. hoever just pulling the ones that have to do with the pum_close elements don’t seem to have an affect even with the !important element however regardless of the disappearing background it still does not function.

Thanks.

I can provide a link but I would need to email it as it’s a staging site.

Thanks again for any help.

@tombarber, @themorrigan

Odds are, both of you copied the custom popup theme styles to your own stylesheet, but you should also go ahead and copy the core styles then insert them just above your custom popup styles.

You can easily get both via Popup Maker -> Settings -> Assets. There is a button to show the styles you need to copy and 2 checkboxes to disable each. Copy them both and disable them both, should fix it.

Most likely, your theme is loading before our plugin core styles. This is causing the close button to break. You can either move your theme to load its styles last like they normally should or the above will work.

As far as the shifting issue, you can try this CSS:

.pum-open-overlay.pum-open-scrollable {
   margin-right: 17px;   
   position: relative;
}

html.pum-open.pum-open-overlay.pum-open-scrollable body>[aria-hidden] {
   padding-right: inherit;
}

You may have to adjust the margin-right value. This CSS has worked in some, but not all cases, the issue can vary from theme to theme.

In short, it’s an issue with the way scrollbars interact with websites. It’s not necessarily an issue or bug with Popup Maker, although Popup Maker’s complexity and versatility is a contributing factor.

We’re looking into a perfect fix for all cases, so stay tuned.

Hope that helps!

• This reply was modified 7 years, 7 months ago by waltmesser.

Hey @waltmesser
I did copy both of the CSS pieces to my theme CSS. I did add what you provided to the top and still getting the same result.

As I showed you above the class appears to simply just disappear when you hover over the text altogether and it makes the button not function. I’ve tried testing it in firebug by changing the item to a div but it’s still the same.

I attempted to see if it was me copying the CSS into my template so I removed it and tried to uncheck the “Don’t load Popup Maker core stylesheet.” and I’m unfortunately unable to do this. It reloads the page and does nothing. Also, without the styles in my skin the button doesn’t show on the popup at all.

Any other suggestions? Thanks in advance!

@themorrigan

I’ll have our Lead Dev @danieliser take a look as soon as possible. Thank you for being patient.

Thank you @waltmesser for your help so far! This is an amazing plugin so I super appreciate it!

Hey @waltmesser or @danieliser – Any update on this?

• This reply was modified 7 years, 7 months ago by Morrigan.

Hey,

I actually managed to sort this out.

To prevent the body moving slightly to right when click on a pop up I added the following CSS.

html {
margin-right: 0 !important;
overflow: visible !important;
}

Also, the pop up button was causing by some conflicting JS with my caching plugin. I added the JS from the plug in folder to the “do not minify” section.

Lastly, I had copied the plug in code to my child theme, that didn’t seem to work out too well. I had to wipe clean the plugin files from the database & reinstall from fresh & now works fine.

Hope that helps!

Tom

@tombarber

Glad you got it working! If you’re enjoying our product, please do take a moment to click that our plugin Works and to rate and review the plugin to spread the love! <3

@themorrigan

I’ll PM @danieliser on this issue. Thank you for being patient.

@themorrigan – The issue you describe generally means that something has changed the ordering of CSS.

You can copy the core and custom theme styles from Popup Maker -> Settings -> Assets tab to your own stylesheets, then disable them from loading with the checkboxes in that section.

I have made a few tweaks for the next update that may help with this in the future as well.

Hope that helps.

Hey @danieliser as I stated previously I did copy it from there and disable the loading but this issue came out of the box.

As it stands I’ve directly changed the CSS provided so it’s not like I’m going out of my way to make this difficult. I did go through and do some additional testing throughout and I think I figured it out.

So I tried to see if it was a conflicting plugin, it was not. I did however switch the location on my theme from “custom CSS” to “Additional CSS” and that seemed to fix the problem. Extremely odd that this problem came from just the stylesheet it was in. It accepted all other CSS changes just fine however that single element didn’t cooperate in the CSS that I was working in.

I appreciate the help and that it will likely be fixed in the future.

One last question for you @danieliser did you happen to fix the issue where you cannot turn the CSS loading back on?

@themorrigan – I had a similar issue, I’ve been trying to fix this following Popup Maker’s FAQ and documentation.

I copied core and theme styles to my own stylesheet and checked “Don’t load Popup Maker core stylesheet.” and “Don’t load popup theme styles to the head.” It did not help.

So I investigated asset loading and it turned out that even thoug I disabled core stylesheet loading (I checked and unchecked many times, cache disabled), the plugin still embeded the core stylesheet in the <head> section.

I added this to my functions.php and the problem disappeared:

function rm_core_pum() {
    wp_dequeue_style( 'popup-maker-site' );
    wp_deregister_style( 'popup-maker-site' );
}
add_action( 'wp_enqueue_scripts', 'rm_core_pum');

Thanks for posting that workaround @zymeth25! Adding your solution to the functions.php file fixed the flickering issue for me as well.