Modal Dialog is obscured by opaque background

Question

I am using Element's Notification component but when it is activated the dialog appears but seems to be "behind" the grey background that is also introduced. Clicking anywhere removes the grey background and allows the interaction with the dialog box but without the greyed out background that should be filtering out the noise of the normal screen. Here is a short video that shows the various states:

video

The code to put the component in as follows:

  <div class="add-address" @click="showAddDialog = true">
    +
  </div>
</div>
<el-dialog
  title="Add New Address"
  :visible.sync="showAddDialog"
  width="30%"
  :before-close="newAddressDialogClosed">
  <span>Postal Address</span>
  <el-input v-model="newAddress" type="text"></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
  </span>
</el-dialog>

I have used the inspector to poke around at the CSS but I haven't yet understood what's causing this from a CSS perspective nor a Vue/Element perspective. Any help would be appreciated.

I have further analyzed the HTML/CSS and the component appears to introduce two separate blocks in the DOM:

The lower block is the grey background which you'd expect to "blur" the page and focus attention on the modal. It, however, is in front of the dialog. Also of interest is that clicking anywhere seems to target the grey background and dismiss it but in so doing it also has a subtle effect on the placement on the dialog box as can be seen here:

Note that the z-index of the dialog box is greater than the background which intuitively makes sense to me but I'd have thought this would have put the dialog box on top. Guess that's not all there is to this.

I have hacked a work-around for now by changing the background to display: none and then adding the following HTML directly before the modal dialog in the DOM:

<div class="modal-background" v-if="showAddDialog"></div>

These seems to validate my underlying suspicion that placement within the DOM tree is important and the component's attempt to place the modal background at the very end of the DOM is somehow problematic.

Do you have the same problem with a simple example like [this](https://jsfiddle.net/hus6n1vd/)? — Alessandro, Dec 19 '17 at 13:39
@Alessandro I am using Typescript but the example you're using is almost precisely what I started with as it comes directly off the demo site. — ken, Dec 19 '17 at 14:27
Do you have any loader somewhere, like [this](https://jsfiddle.net/hus6n1vd/1/)? Your problem seems to be different, but in the piece of code I can't see any error. Can you create a little fiddle? — Alessandro, Dec 20 '17 at 08:42
I've updated the question some with additional context, still stuck though. — ken, Dec 24 '17 at 13:17

hannahcodes · Accepted Answer · 2018-05-01T17:42:36.317

I had the same issue and also found changing the z-index of the dialog had no effect. This was occurring when I had nested Element.Eleme.io elements, which appears to be the case for you also.

The z-index is not quite as simple as "higher always means on top". Elements are grouped into different stacking contexts; it is not possible for an element in a lower stacking context to appear above an element in a higher stacking context. Therefore depending on where the different elements were rendered in the DOM, they can land themselves in different stacking contexts, and are destined to remain at the same relation to one another, no matter how much the z-index has changed. (See https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ for a more detailed explanation on the z-index).

Examining with Chrome dev tools, I found that the obscuring modal is not rendered in the same place as the dialog; in fact it is appended to the body, i.e. on the outer reaches of the application, which appears to be the reason they are not within the same stacking context. There is a quick fix; the dialog element has a property "modalAppendToBody". If true, the modal is rendered to the body, and if false it is rendered to the parent element of the dialog. By specifying this as false I managed to solve the issue:

<el-dialog
  title="Add New Address"
  :visible.sync="showAddDialog"
  width="30%"
  :before-close="newAddressDialogClosed
  :modalAppendToBody="false">
</el-dialog>

Thanks Hanna. The project this came from has been hold for a few months so can't test this solution there but your logic sounds solid so I'm going to mark it as correct. — ken, May 02 '18 at 22:15
To summarize, adding `:modalAppendToBody="false"` to `` does work — hanzichi, Sep 01 '18 at 10:07
depending on the version, it might be `:modal-append-to-body="false"` — mackmack, Nov 20 '18 at 05:27

score 0 · Answer 2 · answered Dec 19 '17 at 13:19

0

you can use the CSS property called z-index

either any object which you want to set to back ? you just have to set z-index: -1; // or more or you want to set any object on to the front of another ? you just have to set z-index: 1; //or more

Check the Snipet For More Info :

.a {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
.b {
    margin-top:150px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1> I am on Image</h1>

<img class="a" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" width="100" height="140">
<br>
<br>
<br>
<br>
<h1> Image is on me</h1>

<img class="b" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" width="100" height="140">

</body>
</html>

answered Dec 19 '17 at 13:19

Syed Muhammad Munis Ali

176
2
10

Yes I was looking at the `z-index` property through the inspector but to my surprise I wasn't able to correct the problem by adjusting the index. – ken Dec 19 '17 at 14:28
So did you fix it out now ..? – Syed Muhammad Munis Ali Dec 19 '17 at 15:14
I've updated the question some with additional context, still stuck though. – ken Dec 24 '17 at 13:17
You should upload a proper snippet of your code so it would be more easy to understand and suggest you a best solution – Syed Muhammad Munis Ali Dec 25 '17 at 10:13
All relevant code is listed. Recreating the exact scenario is not practical for large private repos. – ken Dec 25 '17 at 10:17

Modal Dialog is obscured by opaque background

2 Answers2