What if two dialogs open at the same time?

[lext-7]

when two dialogs was opened in order, the backdrop can not cover the formor?

[morethanreal]

Do you have an example showing the issue?

[lext-7]

<paper-dialog backdrop autoCloseDisabled>
  <p>demo1 large than demo2</p>
  <p>demo1 large than demo2</p>
</paper-dialog >
<paper-dialog backdrop autoCloseDisabled>
  <p>demo2</p>
</paper-dialog>

<script>
  window.addEventListener('polymer-ready', function (){
    var dialogs = document.querySelectorAll('paper-dialog');
//    dialogs[0].toggle();
//    dialogs[1].toggle();
    window.onkeydown = function (e){
      if(e.keyCode == 49){
        dialogs[0].toggle();
      }
      if(e.keyCode == 50){
        dialogs[1].toggle();
      }
    }
  })
</script>

When you press 1 then press 2, you find out that the former paper-dialog can be clicked, the backdrop doesn't cover it. Then you press 2 again, you will find the backdrop is remove, but the former paper-dialog is still opened.

[Preston-Landers]

I had a similar problem with respect to a layered <paper-dropdown-menu> within a layered <paper-dialog>. It creates 2 <core-overlay-layer> elements but gives them the same z-Index. This results in not being able to see the subsequently created one.

It's a bit of a silly hack, but I found this fixed it for me. This example uses jQuery but it could be written without it. It listens for core-overlay-open and re-sequences the z-index on each overlay.

        domReady: function () {
            jQuery("body").on('core-overlay-open', function(e) {
                var zi = 1000;
                jQuery("core-overlay-layer").each(function (ei, elem) {
                    elem.style.zIndex = zi--;
                });
            });
        },