[CLOSED] Modal Window does not open with the correct z-index in desktop

  1. #1

    Modal Window does not open with the correct z-index in desktop

    In the desktop a modal window doesnt open with the correct z-index.

    For the following example when you open the dynamic window and then the modal window the mask of the modal window appears under the dynamic window. If you open and close the windows a few times, the modal window sometimes opens under the dymnamic window.

    How do i get the modal window to always display over dynamic windows?

    
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
        
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Desktop - Ext.NET Examples</title>    
        <script type="text/javascript">
            var createDynamicWindow = function (app) {
                var desk = app.getDesktop();
    
                var w = desk.createWindow({
                    title  : "Dynamic Web Browser",
                    width  : 1000,
                    height : 600,
                    maximizable : true,
                    minimizable : true,
                    autoLoad : {
                        url  : "http://ajaxian.com/archives/mad-cool-date-library/",
                        mode : "iframe",
                        showMask : true
                    }
                });
    
                w.center();
                w.show();
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <ext:Desktop ID="MyDesktop" runat="server" BackgroundColor="Black" ShortcutTextColor="White" Wallpaper="desktop.jpg">
                <StartButton Text="Start" IconCls="start-button" />
                <StartMenu Width="400" Height="400" ToolsWidth="227" Title="Start Menu">
                    <Items>
                        <ext:MenuItem ID="MenuItem4" runat="server" Text="All" Icon="Folder" HideOnClick="false">
                            <Menu>
                                <ext:Menu ID="Menu2" runat="server">
                                    <Items>
                                        <ext:MenuItem Text="Create dynamic" Icon="World">
                                            <Listeners>
                                                <Click Handler="createDynamicWindow(#{MyDesktop});" />
                                            </Listeners>
                                        </ext:MenuItem>
                                        <ext:MenuItem Text="Show Modal" Icon="World">
                                            <Listeners>
                                                <Click Handler="#{ModalWindow}.show();" />
                                            </Listeners>
                                        </ext:MenuItem>                                    
                                    </Items>
                                </ext:Menu>
                            </Menu>
                        </ext:MenuItem>
                    </Items>
                </StartMenu>
            </ext:Desktop>
            
            <ext:Window ID="ModalWindow" runat="server" Modal="true" Hidden="true" Title="Modal Window">
                <Content>
                    This is modal window.
                </Content>
            </ext:Window>
            
        </form>
    </body>
    </html>
    Last edited by Labyrinth; Nov 08, 2011 at 1:54 AM.
  2. #2
    Hi,

    Quote Originally Posted by Labyrinth View Post
    For the following example when you open the dynamic window and then the modal window the mask of the modal window appears under the dynamic window.
    A mask cannot cover an iframe's content.

    Quote Originally Posted by Labyrinth View Post
    For the following example when you open the dynamic window and then the modal window the mask of the modal window appears under the dynamic window.
    I was unable to reproduce it.

    But you could minimize a window with an iframe when you open another window.

    NOTE: Marking as closed. Please feel free to update the thread with a sample to reproduce the problem.
    Last edited by Daniil; Nov 02, 2011 at 4:08 PM.
  3. #3
    I have just tested the posted code above in chrome and the issue is still ocurring.

    The mask can cover the iframe - when I edit the z-index for the mask of the modal box in the object inspector the mask is moved to be over the iframe.
  4. #4
    Quote Originally Posted by Labyrinth View Post
    I have just tested the posted code above in chrome and the issue is still ocurring.
    I open a "Dynamic Window", when I open/hide a modal window ten times and the issue doesn't appear for me.

    Maybe it's a Chrome problem. My Chrome version is 15.0.874.106 m. It say mean that it's the last one.

    Do you use the same? If no, please update. Is the issue still reproducible?


    Quote Originally Posted by Labyrinth View Post
    The mask can cover the iframe - when I edit the z-index for the mask of the modal box in the object inspector the mask is moved to be over the iframe.
    Yes, you are right, it's possible.

    It needs to set up for a mask the same z-index as it's for a modal window.
  5. #5
    I am also using Chrome 15.0.874.106 m.

    Using the posted code with Ext.NET 1.2.0.21133.

    The replication steps are:

    1. Open the Dynamic Web Browser: Start > All > Create Dynamic
    2. Open the modal window: Start > All > Show Modal

    The mask for the modal window appears behind the dynamic web browser window.

    I have just checked it in Firefox 3.5 and it does the same thing.

    This is the HTML that is output:

    
    
         
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1">
        <link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all-embedded-css/ext.axd?v=21133" />
    
        <link rel="stylesheet" type="text/css" href="/ux/extensions/desktop/css/desktop-embedded-css/ext.axd?v=21133" />
    <title>
        Desktop - Ext.NET Examples
    </title>   
        <script type="text/javascript">
            var createDynamicWindow = function(app) {
                var desk = app.getDesktop();
    
                var w = desk.createWindow({
                    title: "Dynamic Web Browser",
                    width: 1000,
                    height: 600,
                    maximizable: true,
                    minimizable: true,
                    autoLoad: {
                        url: "http://ajaxian.com/archives/mad-cool-date-library/",
                        mode: "iframe",
                        showMask: true
                    }
                });
    
                w.center();
                w.show();
            };
        </script>
    
        <script type="text/javascript" src="/extjs/adapter/ext/ext-base-js/ext.axd?v=21133"></script>
    
        <script type="text/javascript" src="/extjs/ext-all-js/ext.axd?v=21133"></script>
        <script type="text/javascript" src="/extnet/extnet-core-js/ext.axd?v=21133"></script>
        <script type="text/javascript" src="/ux/extensions/desktop/js/Desktop-js/ext.axd?v=21133"></script>
        <script type="text/javascript">
        //<![CDATA[
            Ext.net.ResourceMgr.init({id:"ResourceManager1",BLANK_IMAGE_URL:"/extjs/resources/images/default/s-gif/ext.axd",aspForm:"Form1",theme:"blue",icons:["Folder","World"]});Ext.onReady(function(){Ext.QuickTips.init();new Ext.app.App({id:"MyDesktop",getModules:function(){return [];},getStartConfig:function(){return {width:400,toolsWidth:227,height:400,title:"Start Menu",items:{id:"MenuItem4",xtype:"menuitem",hideOnClick:false,iconCls:"icon-folder",text:"All",menu:{id:"Menu2",xtype:"menu",items:[{id:"ctl01",iconCls:"icon-world",text:"Create dynamic",listeners:{click:{fn:function(item,e){createDynamicWindow(MyDesktop);}}}},{id:"ctl03",iconCls:"icon-world",text:"Show Modal",listeners:{click:{fn:function(item,e){ModalWindow.show();}}}}]}}};},getStartButtonConfig:function(){return {iconCls:"start-button",text:"Start"};},backgroundColor:"Black",shortcutTextColor:"White",wallpaper:"desktop.jpg"});new Ext.Window({id:"ModalWindow",contentEl:"ModalWindow_Content",hidden:true,renderTo:Ext.get("Form1"),height:100,width:200,title:"Modal Window",modal:true});});
        //]]>
        </script>
    </head>
    <body>
        <form method="post" action="CooliteTest.aspx" id="Form1">
    <div>
    
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
    <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJLTUwNjA2MDg4D2QWAgIDD2QWBAIDDxQqElN5c3RlbS5XZWIuVUkuUGFpcgEPBQl2c01lbWJlcnMUKwACDwUJU3RhcnRNZW51FCsEAQ8FBGJhc2UWCB4FV2lkdGgCkAMeBkhlaWdodAKQAx4KVG9vbHNXaWR0aALjAR4FVGl0bGUFClN0YXJ0IE1lbnUPBQtTdGFydEJ1dHRvbhQrBAEPBQRiYXNlFgQeBFRleHQFBVN0YXJ0HgdJY29uQ2xzBQxzdGFydC1idXR0b25kAgUPZBYCZg8WAh4FY2xhc3MFCHgtaGlkZGVuZBgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAgUQUmVzb3VyY2VNYW5hZ2VyMQULTW9kYWxXaW5kb3fB6N9PeZ1jacdu5qlM1CGfPIcmwg==" />
    </div>
    
    <script type="text/javascript">
    //<![CDATA[
    var theForm = document.forms['Form1'];
    if (!theForm) {
        theForm = document.Form1;
    }
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }
    //]]>
    </script>
    
    
            
     
            <div id="x-desktop">
        
        
    
    
    
    
    
    </div><div id="ux-taskbar"><div id="ux-taskbar-start"></div><div id="ux-taskbuttons-panel"></div><div class="x-clear"></div></div>
             
            
        <div id="ModalWindow_Content" class="x-hidden">
                    This is modal window.
                </div>
    
             
        </form>
    </body>
    </html>
  6. #6
    I thought you was able to achieve it since you said that a mask can cover an iframe.

    Please look at the example.

    Example
    <%@ Page Language="C#" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
         
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>    
        <script type="text/javascript">
            var createDynamicWindow = function (app) {
                var desk = app.getDesktop();
     
                var w = desk.createWindow({
                    title  : "Dynamic Web Browser",
                    width  : 1000,
                    height : 600,
                    maximizable : true,
                    minimizable : true,
                    autoLoad : {
                        url  : "http://ext.net",
                        mode : "iframe",
                        showMask : true
                    }
                });
     
                w.center();
                w.show();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
     
            <ext:Desktop 
                ID="MyDesktop" 
                runat="server" 
                BackgroundColor="Black" 
                ShortcutTextColor="White">
                <StartButton Text="Start" IconCls="start-button" />
                <StartMenu 
                    Width="400" 
                    Height="400" 
                    ToolsWidth="227" 
                    Title="Start Menu">
                    <Items>
                        <ext:MenuItem 
                            runat="server" 
                            Text="All" 
                            Icon="Folder" 
                            HideOnClick="false">
                            <Menu>
                                <ext:Menu runat="server">
                                    <Items>
                                        <ext:MenuItem Text="Create dynamic" Icon="World">
                                            <Listeners>
                                                <Click Handler="createDynamicWindow(#{MyDesktop});" />
                                            </Listeners>
                                        </ext:MenuItem>
                                        <ext:MenuItem Text="Show Modal" Icon="World">
                                            <Listeners>
                                                <Click Handler="#{ModalWindow}.show();" />
                                            </Listeners>
                                        </ext:MenuItem>                                    
                                    </Items>
                                </ext:Menu>
                            </Menu>
                        </ext:MenuItem>
                    </Items>
                </StartMenu>
            </ext:Desktop>
             
            <ext:DesktopWindow 
                ID="ModalWindow" 
                runat="server"  
                Hidden="true" 
                Title="Modal Window">
                <Content>
                    This is modal window.
                </Content>
                <Listeners>
                    <Show Handler="var mask = Ext.getBody().mask();
                                   mask.applyStyles('z-index:9012;');" />
                </Listeners>
            </ext:DesktopWindow>
        </form>
    </body>
    </html>

Similar Threads

  1. Replies: 5
    Last Post: Apr 20, 2012, 6:20 AM
  2. Open other aspx pages in desktop window
    By Vaishali in forum 1.x Help
    Replies: 1
    Last Post: Jan 19, 2012, 12:20 PM
  3. Replies: 1
    Last Post: Nov 24, 2011, 9:02 PM
  4. [FIXED] [V0.8.0] modal window in desktop
    By [WP]joju in forum Bugs
    Replies: 2
    Last Post: Feb 02, 2009, 1:23 AM
  5. Replies: 6
    Last Post: Jan 26, 2009, 10:06 AM

Tags for this Thread

Posting Permissions