• When the modal is not shown (eg on page load), it is still layered above the content of the page and absorbs mouse clicks, and changes the mouse cursor on hover.

    “visibility: hidden” is much like “opacity: 0”, in that it doesn’t stop you from clicking on it, it just makes it so you can’t see it.

    I suggest you use the time-honored “display: none”. If you can’t do that because you need the element to layout or something, then the trick for hiding it that comes to mind is to position the element off the left side of the screen with something like “left: -100%”.

    I’ve got version 1.3.2 and I’m seeing this css for md-modal:

    .md-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            max-width: 70%;
            min-width: 15%;
            height: auto;
            z-index: 1000 !important;
            visibility: hidden;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform: translateX(-50%) translateY(-50%);
            -moz-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
        }
  • The topic ‘hidden modal is absorbing mouse clicks’ is closed to new replies.