jQuery UI Widgets Forums Dialogs and Notifications Window BringToFront and isModal

This topic contains 4 replies, has 2 voices, and was last updated by  Makla 11 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • BringToFront and isModal #47497

    Makla
    Participant

    If you set isModal: true and then call jqxWindow(‘bringToFront’); the window z-index is lower then “modal rectangle”.

    BringToFront and isModal #47507

    Dimitar
    Participant

    Hello Makla,

    We tested for the reported issue with the following example, but everything works fine at our side. Please post a sample code which demonstrates it and make sure you are using the latest version of jQWidgets (3.1.0).

    <!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>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#jqxwindow').jqxWindow({
                    isModal: true
                });
                $('#jqxwindow2').jqxWindow({
                    width: 230,
                    height: 70,
                    isModal: true
                });
                $("#jqxbutton").jqxButton({
                    height: 30
                });
                $('#jqxbutton').click(function () {
                    $("#jqxwindow").jqxWindow('bringToFront')
                });
            });
        </script>
    </head>
    <body>
        <div id='content'>
            <div id='jqxwindow'>
                <div>
                    Header</div>
                <div>
                    Content</div>
            </div>
            <div id='jqxwindow2'>
                <div>
                    Header2</div>
                <div>
                    <input type="button" id="jqxbutton" value="Invoke the bringToFront method" /></div>
            </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    BringToFront and isModal #47620

    Makla
    Participant

    Your code does work, I spend some time to track the problem down and it accursed when you open modal window from another window.

    <!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>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
           <script type="text/javascript">
            $(document).ready(function () {
                $('#jqxwindow').jqxWindow({
                    width: 300,
                    height: 200
                });
                $('#jqxwindow2').jqxWindow({
                	autoOpen: false,
                	height: 179,
                	isModal: true,
                	width: 300
                });
                $("#jqxbutton").jqxButton({
                    height: 30
                });
                $('#jqxbutton').click(function () {
                	$("#jqxwindow2").jqxWindow('open');
                    $("#jqxwindow2").jqxWindow('bringToFront');
                });
            });
        </script>
    </head>
    <body>
        <div id='content'>
            <div id='jqxwindow'>
                <div>
                    Header</div>
                <div>
                    <input type="button" id="jqxbutton" value="Invoke the bringToFront method" /></div>
            </div>
            <div id='jqxwindow2'>
                <div>
                    Header2</div>
                <div>
                    </div>
            </div>
         </div>
    </body>
    </html>

    Hope it helps.

    BringToFront and isModal #47621

    Dimitar
    Participant

    Hi Makla,

    You are correct – the bringToFront method is not supported when the window is is modal. However, it is not needed, either – the newly opened window is already brought to front, with a higher z-index than the window it was opened from.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    BringToFront and isModal #47764

    Makla
    Participant

    I know it is not needed. I was incidentlly leave bringToFront statement and experience that. I though that this should appear.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.