Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

v4:modal backdrop always hidden even if showBackdrop is true

See original GitHub issue

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.0.5 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.2
   @angular-devkit/schematics : 0.7.2
   @angular/cli               : 6.1.2
   @ionic/ng-toolkit          : 1.0.5
   @ionic/schematics-angular  : 1.0.4

Cordova:

   cordova (Cordova CLI) : 6.5.0
   Cordova Platforms     : not available

System:

   ios-deploy : 1.9.2
   ios-sim    : 6.1.3
   NodeJS     : v8.9.4 (/usr/local/bin/node)
   npm        : 5.6.0
   OS         : macOS High Sierra
   Xcode      : Xcode 9.4.1 Build version 9F2000

Environment:

   ANDROID_HOME : not set

Describe the Bug I create a modal with showBackdrop from ModalController, but the backdrop is always hidden.Check the dom tree, I find out there is a display: none on this component.

@media not all and (min-height: 600px) and (min-width: 768px)
<style>…</style>
ion-modal ion-backdrop {
    display: none;
}

Steps to Reproduce Steps to reproduce the behavior:

Create any modal.
Check the backdrop style.

Expected Behavior If we set the showBackdrop, the backdrop should be visible.

Issue Analytics

State:
Created 5 years ago
Reactions:4
Comments:6 (1 by maintainers)

Top GitHub Comments

1reaction

incNickcommented, Nov 5, 2018

I have use ion-card in my modal window also happen same issue and found them below:

1 ion-backdrop: @media not all and (min-height: 600px) and (min-width: 768px) {display: none;} , remove the display:none attribute then backdrop appear, but click it nothing happen, should be still other js issue. 2 after backdrop tag, the div[role=dialog].modal-wrapper should be remove height 100% and contain: strict, then add position: absolute; top: 0; else the dialog div always overwrite the backdrop. (After this step should be only can see the backdrop) 3 the custome element tag (like <app-my-component>) should be remove class ‘ion-page’, then everything looks ok.

0reactions

ionitron-bot[bot]commented, Jan 6, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Top Results From Across the Web

v4:modal backdrop always hidden even if showBackdrop is true

I create a modal with showBackdrop from ModalController , but the backdrop is always hidden.Check the dom tree, I find out there is...

Bootstrap Modal sitting behind backdrop - Stack Overflow

Although this works, form controls still seem to appear above the backdrop, clicking anywhere dismisses the modal, but it doesn't look great.

Modal - Bootstrap

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

Bootstrap Modal Dialog showing under Modal Background

modal -backdrop overlay sits in the root of the DOM tree while the other content is buried in a separate DOM node tree....

Modal Backdrop stuck - Material Design for Bootstrap

I have tried on Firefox@Ubuntu, Chrome@Ubuntu, Chrome@Mac Mojave (emulator) - hiding modal both from the backdrop and hide button, and there's no such...