Modal Shortcode Issue

[kibaka91]

Hi,
i have an issue with the modal shortcode inserted in my header options >> Top Bar right text config.

I insert this :

[sf_modal header=”test” btn_colour=”accent” btn_type=”dropshadow” btn_size=”small” btn_text=”Button text”]
ENTER THE MODAL BODY HERE
[/sf_modal]

but when i click on the button, i have the black filter over the modal window, and i can’t interact with it. (see test1.png and test2.png)

I have try to customise this test with mymail newsletter shortcode :

[sf_modal header=”Subscribe to the newsletter” btn_colour=”accent” btn_type=”standard” btn_size=”small” btn_text=”Signup for the newsletter”][newsletter_signup]Signup for the newsletter[newsletter_signup_form][/newsletter_signup][/sf_modal][social size=’small’ style=’light’ type=’twitter,facebook’]

and the same problem appear (see test3.png)

How i can fix this ?
Thank you.

[Melanie – SUPPORT]

Hi
Can you post up the URL to a page where this is happening so I can check it out directly?
Did you try deactivating all your plugins to see if that solves it?

Thanks!

[kibaka91]

Hi,
yes you can see that here >> http://solidclothing.fr

[Kyle – SUPPORT]

A quick fix would be to add this custom css:

.modal-backdrop, .modal-backdrop.fade.in {
  display: none;
}

– Kyle

[kibaka91]

Hi,
thank you for reply,
this tips can be a quick fix for now, but where exactly i must paste this css ?
Sorry i’m not a dev 🙁

Also, you’ll fix this issue in a future update ?

Tank you

[Kyle – SUPPORT]

Paste this in Theme Options > Custom CSS

I will let Ed know about this

– Kyle

[kibaka91]

Hi,
this fix don’t works unfortunately :'(
look solidclothing.fr, the modal window don’t appear on click with this custom CSS

PS: Who is Ed ?

[Melanie – SUPPORT]

Hi, sorry about the confusion 🙂

Ed is the developer of the theme, I will escalate this to him to check it out. Could you remove the css Kyle gave you so the developer can see the error live?

Thank you so much!

[Swift Ideas – Ed]

Hi there,

Which version of the theme are you using? Any custom plugins installed? Try disabling any that you do have active. Tested this here and can’t replicate, so guessing it’s either an outdated theme or conflicted plugin.

Let us know!

– Ed

[kibaka91]

Hi,
thanks for reply,
I have the 1.63 version of the theme. I have disabled all plugin and the child theme too.
I have nothing other that the theme.
I have deleted the CSS of Kyle.

But the problem Persist.
You can see that on solidclothing.fr

[Swift Ideas – Ed]

Where is the shop page?

– Ed

[kibaka91]

Hi,
There is no shop page.
I have just installed wordpress and the theme. Nothing else.
Il have installed woo commerce plugin but i have disabled all plugin on your demand.

[Swift Ideas – Ed]

Does this happen if you place the modal in the body content of a page?

I’m not sure it will work in the top bar at the moment, we don’t have the added functionality for that.

– Ed

[kibaka91]

On the homepage, in the first demo article, it doesn’t appear. (why ?)
in the same article, but on the article page, it appears and works fine : http://solidclothing.fr/bonjour-tout-le-monde/

But i want to make a link to a newsletter subscriber on the top bar, how i can do that ? You can’t fix this little bug ? It is a probleme of the depth of the black opacity ? can i just disabled the black opacity for the moment ?

[Swift Ideas – Ed]

Try this custom css:

#top-bar {
z-index: auto;
}

Add to theme options > general options > custom css.

– Ed