Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Bug in window z-index (opening windows from modal window)

3 Answers 494 Views
Window
This is a migrated thread and some comments may be shown as answers.
Matjaz
Top achievements
Rank 1
Matjaz asked on 06 Nov 2014, 03:42 PM
If you open 2 non modal windows from modal window, and then close one non modal window, the second window gets z-index lover than k-overlay.
Demo.
Not expected behaviour.

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 10 Nov 2014, 10:01 AM
Hello Matjaz,

By design, when a Window is opened or focused, its z-index is increased, so that the Window instance is guaranteed to be on top of all other instances.

Each time when you click on a button inside the first Window, the z-index of the first Window is increased, which ultimately causes it to be in a higher stacking context than the second Window. You can easily verify this if you check the browser's DOM inspector. When you close the third Window, the modal overlay is adjusted to be consistent with the modal Window with a highest stacking context, which is the first Window, so the second one naturally goes behind the modal overlay.

You can change the observed behavior by tweaking the z-index styles of the three Windows, according to your preferences:

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title>Window</title>
</head>
<body>
 
<div id="example">
    <div id="window">
        <button data-bind="click: button1click">click first</button><br>
        <button data-bind="click: button2click">second button</button>
    </div>
    <div id="window1">now click second button</div>
    <div id="window2">now close this window<br>window 1 will go behind modal overview</div>
</div>
 
<script>
    var viewModel = kendo.observable({
      button1click: function(e)
      {
        $('#window1').kendoWindow({position: {top: 200, left: 300}});
      },
      button2click: function(e)
      {
        $('#window2').kendoWindow({position: {top: 300, left: 400}});
         
        var window0Wrapper = $("#window").data("kendoWindow").wrapper;
        var window1Wrapper = $("#window1").data("kendoWindow").wrapper;
         
        window0Wrapper.css("z-index", window1Wrapper.css("z-index") - 2);
      },
    });
    kendo.bind($("body"), viewModel);
  $('#window').kendoWindow({modal: true});
</script>
 
</body>
</html>


Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Oron
Top achievements
Rank 1
answered on 29 Mar 2016, 01:53 PM

Hey Dimo.

This unexpected behaviour happened to me to.

Is there any generic solution for this? Like a callback to help me deal with the zIndex after the modal window toFront's method was called?

I don't want to save a list of windows that my modal window opened.

Thanks in advanced.

0
Dimo
Telerik team
answered on 01 Apr 2016, 07:33 AM
Hello Oron,

It is possible to stop the propagation of the buttons' mousedown event. In this way the first Window widget will not be aware of the clicks and will not raise its z-index style.

var viewModel = kendo.observable({
  button1click: function(e)
  {
    $('#window1').kendoWindow({position: {top: 200, left: 300}});
  },
  button2click: function(e)
  {
    $('#window2').kendoWindow({position: {top: 300, left: 400}});
  },
});
 
kendo.bind($("body"), viewModel);
 
$('#window').kendoWindow({modal: true});
 
function buttonMouseDown(e) {
  e.stopPropagation();
}
 
$('#window button').on("mousedown", buttonMouseDown);


Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Window
Asked by
Matjaz
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Oron
Top achievements
Rank 1
Share this question
or