Page 1 of 1

Modal Layer is behind the Page header

Posted: Fri Aug 17, 2018 5:20 am
by ruel.lago22
Hi Pablo,

I have a question in regards to the Page header mode: Fixed with Stack level: in front of content. It goes in front of the Layer Mode: Modal layer with Model type: bootstrap and it looks ugly and it cuts the upper part of the Modal layer. How can we fix this? Thank you in advance!

Image

Re: Modal Layer is behind the Page header

Posted: Fri Aug 17, 2018 6:41 am
by Pablo
Fixed with Stack level: in front of content. It goes in front of the Layer Mode
Correct, that is the purpose of this option. The only way to prevent this is by (manually) giving the modal layer a higher z-index.

Re: Modal Layer is behind the Page header

Posted: Fri Aug 17, 2018 7:50 am
by ruel.lago22
Pablo wrote:
Fri Aug 17, 2018 6:41 am
higher z-index.
Where can I find the z-index Pablo? Thanks again!

Re: Modal Layer is behind the Page header

Posted: Fri Aug 17, 2018 7:57 am
by Pablo
You will need custom code for that.
The exact code depends on the settings of your dialog.

Re: Modal Layer is behind the Page header

Posted: Fri Aug 17, 2018 8:24 am
by ruel.lago22
Pablo wrote:
Fri Aug 17, 2018 7:57 am
You will need custom code for that.
The exact code depends on the settings of your dialog.
Uhmmm... I tried to do some research and put a custom code

Code: Select all

 z-index:77777;
in the dialog object html: custom style but nothing happens even I make the number in millions. I hope you can help :D :D :D (cross-finger)

Re: Modal Layer is behind the Page header

Posted: Fri Aug 17, 2018 8:36 am
by BaconFries
Page HRML Between <head></head>tag*

Code: Select all

<style>
#Layer1
{
   z-index: 8888 !important;
}
</style>

Re: Modal Layer is behind the Page header

Posted: Fri Aug 17, 2018 8:46 am
by ruel.lago22
BaconFries wrote:
Fri Aug 17, 2018 8:36 am
Page HRML Between <head></head>tag*

Code: Select all

<style>
#Layer1
{
   z-index: 8888 !important;
}
</style>
OMG!!! Haven't anyone told you that you are a rockstar! Thank you so much BaconFries!!! It worked!!!

Image

Re: Modal Layer is behind the Page header

Posted: Fri Aug 17, 2018 9:19 am
by BaconFries
I have been called may things...but a rockstar is on of the more friendly...😅 Note if using more than once on same page then you need to change #Layer1 to Layer2 etc.

Re: Modal Layer is behind the Page header

Posted: Mon Sep 03, 2018 3:15 pm
by Magical
I have the somewhat similar issue. I dropped the Newsletter dialog on the main page which is using a master_frame. The dialog box is stuck on the top and inside the menu.

I added this
<style>
#Layer1
{
z-index: 8888 !important;
}
</style>

but still stuck. Click on the URL and you can see it at very top.

http://d2biz.com

Re: Modal Layer is behind the Page header

Posted: Mon Sep 03, 2018 3:26 pm
by Pablo
Where exactly do I need to look for the dialog?

Re: Modal Layer is behind the Page header

Posted: Mon Sep 03, 2018 3:29 pm
by BaconFries
About to ask the same!

Re: Modal Layer is behind the Page header

Posted: Mon Sep 03, 2018 4:32 pm
by Magical
On the home page its at the very top - faded and merged in with menu bar.

Re: Modal Layer is behind the Page header

Posted: Mon Sep 03, 2018 4:38 pm
by Magical
Here is an image of it Image

Re: Modal Layer is behind the Page header

Posted: Mon Sep 03, 2018 4:58 pm
by Pablo
There seems to be something wrong with the style sheet.
Please set all HTML formatting options (Tools->Options->HTML) to their defaults and remove any custom code you may have added.

Re: Modal Layer is behind the Page header

Posted: Mon Sep 03, 2018 5:15 pm
by Magical
I removed the custom code - which were master_frame:

between head and /head
<!-- Insert Google Analytics code here -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/j ... "></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'XA-96858582-1');
</script>

AFTER BODY TAG
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk. ... sion=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


And now it works.