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

4 posts, 0 answers
  1. Matjaz
    Matjaz avatar
    94 posts
    Member since:
    Jun 2014

    Posted 06 Nov 2014 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 10 Nov 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Oron
    Oron avatar
    4 posts
    Member since:
    Aug 2014

    Posted 29 Mar in reply to Dimo Link to this post

    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.

  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 01 Apr Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready