Materialize: Modal lean-overlay overlaps everything

Created on 16 Jun 2015 · 30Comments · Source: Dogfalo/materialize

Hey guys,
I already tried everything that came to my mind.
For me, the lean-overlay div overlaps EVERYTHING when opening a modal. Every other component gets darkened (of course), but even the modal itself. Furthermore, the buttons on the modal don't produce a pointer coursor.
If I manually set the display property of the lean-overly to none, it works.
I tried to change the z-indices of the modal and the overlay, but that doesn't seem to affect anything.

unbenannt

Source

riesinger

All 30 comments

Can you provide some code or a repo?

rohanray on 16 Jun 2015

Yes, just give me a secont. As I am doing this for a companiy, I have to censor everything :/

riesinger on 16 Jun 2015

sorry for the bad formatting, I am using jade and sass

<div class="row"><a id="0" href="#mod1" onmouseover="hoverSlide(0)" class="card-panel slide invisible modal-trigger col m4 s12">
              <div class="front">
                <h5>Identity Management</h5>
                <p>realisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz.</p>
              </div></a><a id="1" href="#mod2" onmouseover="hoverSlide(1)" class="card-panel slide invisible modal-trigger col m4 s12">
              <div class="front">
                <h5>Identity Management</h5>
                <p>realisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz.</p>
              </div></a><a id="2" href="#mod3" onmouseover="hoverSlide(2)" class="card-panel slide invisible modal-trigger col m4 s12">
              <div class="front">
                <h5>Identity Management</h5>
                <p> realisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz.</p>
              </div></a><a id="3" href="#mod4" onmouseover="hoverSlide(3)" class="card-panel slide invisible modal-trigger col m4 s12">
              <div class="front">
                <h5>Identity Management</h5>
                <p> realisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz.</p>
              </div></a><a id="4" href="#mod5" onmouseover="hoverSlide(4)" class="card-panel slide invisible modal-trigger col m4 s12">
              <div class="front">
                <h5>Identity Management</h5>
                <p> realisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz.</p>
              </div></a><a id="5" href="#mod6" onmouseover="hoverSlide(5)" class="card-panel slide invisible modal-trigger col m4 s12">
              <div class="front">
                <h5>Identity Management</h5>
                <p> realisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz.</p>
              </div></a></div>

<div id="mod1" class="modal">
          <div class="modal-content">
            <h3>Identity Management</h3>
            <p>
              ealisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz. Konzernweit wurde für den Kunden eine neue, schnell verfügbare Transparenz geschaffen.
              Bisher betreute Branchen:
              Autombilindustrie, Handwerk, Dienstleistungen, Prozessindustrie, Handel.
            </p>
          </div>
          <div class="modal-footer"><a href="#!" class="modal-action modal-close waves-effect waves-indigo btn">OK</a></div>
        </div>

basically this is exactly as the example
i did not really change the CSS, except for changing the z-index of .modal to 999 and the z-index of the lean-overlay to 800

riesinger on 16 Jun 2015

You have only 1 Modal Class over here: <div id="mod1" class="modal"> with id as "mod1". Hence a href can only have "#mod1" I changed all a href to "mod1" and its working. See here https://meteorialize-rohanray.c9.io/#! and click Arial7Modal on the left hand side navigation.

rohanray on 16 Jun 2015

You might want to use below code:

<template name="modalGitTest">
    <div class="row">
        <a id="0" href="#mod1" onmouseover="hoverSlide(0)" class="card-panel slide invisible modal-trigger col m4 s12">
            <div class="front">
                <h5>Identity Management</h5>
                <p>realisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz.</p>
            </div>
        </a>
        <a id="1" href="#mod2" onmouseover="hoverSlide(1)" class="card-panel slide invisible modal-trigger col m4 s12">
            <div class="front">
                <h5>Identity Management</h5>
                <p>realisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz.</p>
            </div>
        </a>
        <a id="2" href="#mod3" onmouseover="hoverSlide(2)" class="card-panel slide invisible modal-trigger col m4 s12">
            <div class="front">
                <h5>Identity Management</h5>
                <p> realisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz.</p>
            </div>
        </a>
        <a id="3" href="#mod4" onmouseover="hoverSlide(3)" class="card-panel slide invisible modal-trigger col m4 s12">
            <div class="front">
                <h5>Identity Management</h5>
                <p> realisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz.</p>
            </div>
        </a>
        <a id="4" href="#mod5" onmouseover="hoverSlide(4)" class="card-panel slide invisible modal-trigger col m4 s12">
            <div class="front">
                <h5>Identity Management</h5>
                <p> realisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz.</p>
            </div>
        </a>
        <a id="5" href="#mod6" onmouseover="hoverSlide(5)" class="card-panel slide invisible modal-trigger col m4 s12">
            <div class="front">
                <h5>Identity Management</h5>
                <p> realisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz.</p>
            </div>
        </a>
    </div>

    <div id="mod1" class="modal">
        <div class="modal-content">
            <h3>Identity Management</h3>
            <p>
                ealisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz. Konzernweit wurde für den Kunden eine neue, schnell verfügbare Transparenz
                geschaffen. Bisher betreute Branchen: Autombilindustrie, Handwerk, Dienstleistungen, Prozessindustrie, Handel.
            </p>
        </div>
        <div class="modal-footer"><a href="#!" class="modal-action modal-close waves-effect waves-indigo btn">OK</a>
        </div>
    </div>
        <div id="mod2" class="modal">
        <div class="modal-content">
            <h3>Identity Management</h3>
            <p>
                ealisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz. Konzernweit wurde für den Kunden eine neue, schnell verfügbare Transparenz
                geschaffen. Bisher betreute Branchen: Autombilindustrie, Handwerk, Dienstleistungen, Prozessindustrie, Handel.
            </p>
        </div>
        <div class="modal-footer"><a href="#!" class="modal-action modal-close waves-effect waves-indigo btn">OK</a>
        </div>
    </div>
        <div id="mod3" class="modal">
        <div class="modal-content">
            <h3>Identity Management</h3>
            <p>
                ealisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz. Konzernweit wurde für den Kunden eine neue, schnell verfügbare Transparenz
                geschaffen. Bisher betreute Branchen: Autombilindustrie, Handwerk, Dienstleistungen, Prozessindustrie, Handel.
            </p>
        </div>
        <div class="modal-footer"><a href="#!" class="modal-action modal-close waves-effect waves-indigo btn">OK</a>
        </div>
    </div>
        <div id="mod4" class="modal">
        <div class="modal-content">
            <h3>Identity Management</h3>
            <p>
                ealisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz. Konzernweit wurde für den Kunden eine neue, schnell verfügbare Transparenz
                geschaffen. Bisher betreute Branchen: Autombilindustrie, Handwerk, Dienstleistungen, Prozessindustrie, Handel.
            </p>
        </div>
        <div class="modal-footer"><a href="#!" class="modal-action modal-close waves-effect waves-indigo btn">OK</a>
        </div>
    </div>
        <div id="mod5" class="modal">
        <div class="modal-content">
            <h3>Identity Management</h3>
            <p>
                ealisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz. Konzernweit wurde für den Kunden eine neue, schnell verfügbare Transparenz
                geschaffen. Bisher betreute Branchen: Autombilindustrie, Handwerk, Dienstleistungen, Prozessindustrie, Handel.
            </p>
        </div>
        <div class="modal-footer"><a href="#!" class="modal-action modal-close waves-effect waves-indigo btn">OK</a>
        </div>
    </div>
        <div id="mod6" class="modal">
        <div class="modal-content">
            <h3>Identity Management</h3>
            <p>
                ealisierte auf Basis von Open-Source-Technologien ein Berichtswesen für über 80.000 Anwender. Dies ist eine der weltweit größten Open Source-Installationen im produktiven Einsatz. Konzernweit wurde für den Kunden eine neue, schnell verfügbare Transparenz
                geschaffen. Bisher betreute Branchen: Autombilindustrie, Handwerk, Dienstleistungen, Prozessindustrie, Handel.
            </p>
        </div>
        <div class="modal-footer"><a href="#!" class="modal-action modal-close waves-effect waves-indigo btn">OK</a>
        </div>
    </div>
</template>

rohanray on 16 Jun 2015

@Arial7 Does it help if you keep the original z-index and not change any z-index?

rohanray on 16 Jun 2015

I know that I only have on modal. The different z-indices don't make any difference, which is why I am so confused.
The code on your website does not work for me at all.
Does it make a difference that I only have one modal? I will try it out.

Thanks for your help!!!

EDIT: Tested it. It unfortunatedly doesn't make any diffference at all.

riesinger on 16 Jun 2015

yes, since you have only 1 modal which means all your a href values should be "#mod1" only and not "#mod2" or "#mod3" or so on since you do not have any modal classes with id as mod2 or mod3 and so on. I have got to know from another source as well that the code in my website is not working. Although, the pop ups do open on my computer. Are you using a Mac by any chance?

rohanray on 16 Jun 2015

Nope, I am not using Mac.
Here at work I use Win7 with chrome
at home I use Arch Linux with chromium

The thing is: The modals all do open, but the overlay is IN FRONT of the actual modal. I can not klick the close button to close it, rather I have to use escape

riesinger on 16 Jun 2015

@Arial7 I figured out the issue. I am using Meteor and I had to move the jquery plugin init code within the template's onrendered callback. I am not much familiar with Jade. However, if you have any such callbacks for JAde which gets called post the template has been rendered and ready. Within such callback, you need to place this piece of code:

    $(document).ready(function() {
        // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
        $('.modal-trigger').leanModal(),
            $('.button-collapse').sideNav({
                closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
            });
    });

You can check my site now @ https://meteorialize-rohanray.c9.io/#!

rohanray on 16 Jun 2015

Hey, JADE is just a HTML "simplifier", just like sass or scss but for HTML.

I called the leanModal function in an init script.

riesinger on 16 Jun 2015

Are you also using any other CSS frameworks like Bootstrap? If yes, got to know from @xpluscal that both share same name spaces for some elements. May be you can check on those lines.

rohanray on 17 Jun 2015

Are you also using some other CSS scripts like Bootstrap? If yes, then the issue might be with shared namespaces for some elements. got to know from @xpluscal . May be you can check on those lines.

rohanray on 17 Jun 2015

No, I am only using materialize. May it because of my custom JavaScript? I do a little "slideshow" with the modal triggers, I will post some code as soon as I am home

riesinger on 17 Jun 2015

Here is some of the slideshow code. I know it is nothing fancy, it was just qick and dirty.

currSlide = 0;
numSlides = 6;
interval = 0;

function nextSlide(user) {
    if(user)
        window.clearInterval(interval);

    currSlide++;
    if (currSlide >= numSlides)
        currSlide = 0;

    loadActiveSlide();
}

function hoverSlide(slide) {
    currSlide = slide;
    window.clearInterval(interval);
    loadActiveSlide();

}


function loadActiveSlide() {
    $('.slides .slide').each(function(i) {
            $('.slides .slide').eq(i).addClass('invisible');
            $('.slides .slide').eq(i).removeClass('visible');
    });

    $('.slides .slide#' + currSlide).removeClass("invisible");
    $('.slides .slide#' + currSlide).addClass("visible");

}

function loopNextSlide() {
    nextSlide(false);
}

$(document).ready(function(){
    interval = window.setInterval(loopNextSlide, 2000);
});

And here is the sass for the slideshow

.slide
    color: black
    display: block
    position: relative
    transform: translateY(0)
    transition: all 0.3s ease-in-out
    margin: 5px 5px
    width: calc(33.33% - 10px) !important
    padding-bottom: .25rem
    &.invisible
        opacity: 0.65
    &.visible
        transform: translateY(-10px) translateX(2px)
        opacity: 1

riesinger on 18 Jun 2015

@Arial7 I was just about to post that I had the same issue as I saw I had modal INSIDE a row, which screws up things. Have you tried to move it outside (so parent is just body)? It worked for me.

universaldenmark on 22 Jun 2015

Thanks, I will try it when I get home from school. Will also post if it worked.

riesinger on 22 Jun 2015

Moving everything out of the .row did jot work either. I now discovered that I suddenly have exactly the same problem with the material boxed images.

riesinger on 24 Jun 2015

hey there, I'm having the same exact issue with an ember application.

I'm using the openModal function and it appears that in this function it simply places the overlay by doing $("body").append(overlay); If the function allowed in the options parameter to specify which element you would like to append the overlay, this would solve the issue for me.

sedouard on 24 Jun 2015

I changed the $("body").append(overlay) in materialize.js to $("main").append(overlay) and now it works, just like it should.

riesinger on 4 Jul 2015

Changing $("body").append(overlay) seems to work very well, but I still wondering the reason behind this problem.

devas114 on 28 Feb 2016

👍1

I have a same issue. firefox is only one that works properly
changing materialize.js code is still the only way to fix this issue?

makerj on 7 Mar 2016

I have not found any other solution myself... So I guess the answer is yes.

riesinger on 7 Mar 2016

How did you change the $("body").append(overlay)?am having the same problem.

WilfredKesh on 6 May 2016

Well, you just edit the materialize.js file and then minify your edited version.

riesinger on 6 May 2016

what if you dont have access to the materialize.js file? using materialize-sass gem and requiring materialize-sprockets in application.js

WilfredKesh on 9 May 2016

I have no idea how to solve the issue then... Sorry

riesinger on 9 May 2016

So I've had this issue solved for a while. Here's what i do:

Open modal:

$('#some-modal').openModal({
     dismissible: dismissible
});

// grab the dark overlay
var overlay = $('.lean-overlay');
// remove it
overlay.detach();
// attach it to the thing you want darkened
$('.container').after(overlay);

Close modal:

// close the modal
$(modal).closeModal();
// grab the dark overlay
var overlay = $('.lean-overlay');
// remove it
overlay.detach();

It's been working just fine for me. Although it is a hack-around.

sedouard on 9 May 2016

👍1

My modal has only been working on certain parts of the page, when it overlaps certain divs like one containing a slider it shows up behind the overlay. I'm using pushpin to keep the form fixed while the rest of the page scrolls down. I tried seduards solution and the same thing happens

WilfredKesh on 12 May 2016

Well in may case it was my mistake, i created a relative div which it was containing my modal, i just removed relative property and it worked :S I know it's not a solution but you may make this mistake.