Jemt / Fit.UI

Fit.UI is a JavaScript based UI framework built on Object Oriented principles
http://fitui.org
GNU Lesser General Public License v3.0
19 stars 7 forks source link

Dialogs on top of each other - Modal mode does not work properly #60

Closed Jemt closed 5 years ago

Jemt commented 5 years ago

Modal mode does not work well when having multiple dialogs open on top of each other. The layer responsible for blurring the content behind the dialog, and prevent the user from interacting with it, remains behind all open dialogs.

Notice how dialog in the back is still accessible to the user, even though both dialogs have Modal(true).

image

Jemt commented 5 years ago

Code to reproduce and test problem:

var openDia = function()
{
    var dia = new Fit.Controls.Dialog();
    dia.Dismissible(true, true);
    dia.Content("Hello world<br><br>");
    dia.Width(Fit.Math.Random(300, 600));
    dia.Height(Fit.Math.Random(200, 500));
    dia.Modal(true);

    var cmdOpen = new Fit.Controls.Button();
    cmdOpen.Title("Open new dialog");
    cmdOpen.OnClick(function(sender) { openDia() });

    dia.AddButton(cmdOpen);

    var dd = new Fit.Controls.DropDown();
    dd.SetPicker(new Fit.Controls.ListView())
    dd.GetPicker().AddItem("Hello world", "001");
    dd.GetPicker().AddItem("Testing", "002");
    dd.GetPicker().AddItem("Fit.UI rocks", "003");
    dd.Render(dia.GetContentDomElement());

    dia.Open();
}

openDia();
Jemt commented 5 years ago

Fixed - it now works as expected, as demonstrated in the following screenshot:

image