jQWidgets Forums

jQuery UI Widgets › Forums › Dialogs and Notifications › Window › window modality – stack

Tagged: 

This topic contains 10 replies, has 3 voices, and was last updated by  woern123 13 years ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    window modality – stack Posts
  • April 1, 2012 at 2:10 pm window modality – stack #3149

    edhrx
    Participant

    I have a modal window which is basically a data entry form . When saving I run some validation routines and if errors are found then ‘error window’ pops up, this is also modal….Well its not exactly modal I can still interact with the data entry form underneath. The remain ‘stacked’ in as much the data entry form is not broght to the front. The most specific problem is the user can close the data entry form which then leaves the error window ‘orphaned’.

    Would a run round be 1: work out when the data entry form gets focus 2: If the error window is showing hide it.
    or
    Is there a way of capturing the ‘closing’ of the data entry form but cancel it if the error window is showing

    does it make sense….

    Ed.

    April 2, 2012 at 5:13 am window modality – stack #3152

    Peter Stoev
    Keymaster

    Hi Ed,

    You can use the ‘Click’ event as a solution. When the user clicks the ‘data entry’ form, close the error window.

    For example:

    $("#window").click(function () {
        // close the error window.
    });

    Hope this helps.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    May 12, 2012 at 7:33 pm window modality – stack #4101

    woern123
    Member

    i have an similar problem
    when i open the first window and then open the second window, this is not 100% modal
    i can still interact with the form-content of the first window
    i think this is a bug in jqxWindow
    i dont want to hide the first window and re-show it after i close the second window
    is there another solution?

    May 12, 2012 at 7:39 pm window modality – stack #4102

    Peter Stoev
    Keymaster

    Hi woern123,

    Do you open the Window in modal or non-modal form? By default it is opened as a non modal window. Could you provide the code that you use for creating the window and opening additional windows?

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    May 12, 2012 at 7:57 pm window modality – stack #4103

    woern123
    Member

    the interaction is not limited to form-elements, i can interact with the whole content
    i forgot to write in my first posting that i load the content with setContent, can this be the problem?

    May 12, 2012 at 8:07 pm window modality – stack #4104

    woern123
    Member

    the create-code:

    $('#WindowName').jqxWindow({
    autoOpen: false,
    draggable: false,
    resizable: false,
    animationType: 'none',
    isModal: true,
    showCloseButton: false,
    title: 'WindowTitle',
    content: 'Loading...',
    height: 400,
    width: 400,
    maxHeight: 810,
    maxWidth: 1200,
    theme: 'energyblue'
    });

    the code to open a window:

    myurl='content.php?param=1';
    changeContent(myurl, $('#WindowName'));
    $('#WindowName').jqxWindow('show');

    the changeContent-function:

    function changeContent(url, window) {
    window.jqxWindow('setContent', 'Loading...');
    $.ajax({
    dataType: 'html',
    url: url,
    success: function (data) {
    //Parsing the data if needed
    window.jqxWindow('setContent', data);
    },
    error: function () {
    window.jqxWindow('setContent', 'Error');
    }
    });
    }

    the other windows have the same code to create and set the content

    May 12, 2012 at 8:46 pm window modality – stack #4106

    Peter Stoev
    Keymaster

    Hi woern123,

    I created a web page with jQWidgets 2.1

    Here’s my code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#WindowName').jqxWindow({
                    autoOpen: false,
                    draggable: false,
                    resizable: false,
                    animationType: 'none',
                    isModal: true,
                    showCloseButton: false,
                    height: 400,
                    width: 400,
                    maxHeight: 810,
                    maxWidth: 1200,
                    theme: 'energyblue'
                });
                $('#WindowName').jqxWindow('show');
            })
        </script>
    </head>
    <body class='default'>
        <div id="WindowName">
            <div>Title</div>
            <div>
                <input value="My Button" type="button" />
                <input value="My Button 2" type="button" />
            </div>
        </div>
        <input value="My Value" type="button" />
    </body>
    </html>

    In the page, I am able to interact with “My Button” and “My Button 2” – buttons which are inside the content of the window. I am unable to interact with the “My Value” button which is outside of the window. Could you provide steps to follow or how to modify the code or what should I do to reproduce the reported behavior?

    Looking forward to your reply.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    May 13, 2012 at 9:07 am window modality – stack #4111

    woern123
    Member

    ok, i added an second window to your code
    and then there i can interact with the content of the first window

    $(document).ready(function () {
    $('#WindowName_1').jqxWindow({
    autoOpen: false,
    draggable: false,
    resizable: false,
    animationType: 'none',
    isModal: true,
    showCloseButton: false,
    height: 400,
    width: 400,
    maxHeight: 810,
    maxWidth: 1200,
    theme: 'energyblue'
    });

    $('#WindowName_2').jqxWindow({
    autoOpen: false,
    draggable: false,
    resizable: false,
    animationType: 'none',
    isModal: true,
    showCloseButton: false,
    height: 200,
    width: 200,
    maxHeight: 810,
    maxWidth: 1200,
    theme: 'energyblue'
    });

    $('#WindowName_1').jqxWindow('show');
    $('#WindowName_2').jqxWindow('show');

    })

    Title 1

    Title 2

    what i want are nested windows, so when i open the second window the first window should be disabled

    i have tested another code, where i use $(‘#WindowName_1’).jqxWindow(‘disable’); in the second window to disable the first
    but the behaviour is the same, i can interact with the first window, it is not completely disabled

    May 13, 2012 at 9:13 am window modality – stack #4113

    woern123
    Member

    ups, the code is not complete, what’s wrong?
    how can i post code like your example?

    May 13, 2012 at 10:44 am window modality – stack #4115

    Peter Stoev
    Keymaster

    According to me, the scenario to have 2 modal dialogs opened at the same time is not a correct one. Opening a modal window supposes that if there’s another modal window, you should close it. You should not keep 2 modal windows opened at the same time. However, if you want to achieve that, you can change the z-index of the second window. In addition, to post formatted code, select the code and press the “Format HTML Code” button in the forum’s toolbar.

    For example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#WindowName').jqxWindow({
                    autoOpen: false,
                    draggable: false,
                    resizable: false,
                    animationType: 'none',
                    isModal: true,
                    showCloseButton: false,
                    height: 400,
                    width: 400,
                    maxHeight: 810,
                    maxWidth: 1200,
                    theme: 'energyblue'
                });
                $('#WindowName').jqxWindow('show');
                $('#WindowName2').jqxWindow({
                    autoOpen: false,
                    draggable: false,
                    resizable: false,
                    animationType: 'none',
                    isModal: true,
                    showCloseButton: false,
                    height: 200,
                    width: 200,
                    maxHeight: 810,
                    maxWidth: 1200,
                    theme: 'energyblue'
                });
                $('#WindowName2').jqxWindow('show');
                $('#WindowName2').css('z-index', 2000);
                $($('.jqx-window-modal')[1]).css('z-index', 1900);
            })
        </script>
    </head>
    <body class='default'>
        <div id="WindowName">
            <div>Title</div>
            <div>
                <input value="My Button" type="button" />
                <input value="My Button 2" type="button" />
            </div>
        </div>
        <div id="WindowName2">
            <div>Title</div>
            <div>
                <input value="My Button" type="button" />
                <input value="My Button 2" type="button" />
            </div>
        </div>
        <input value="My Value" type="button" />
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    May 13, 2012 at 8:47 pm window modality – stack #4125

    woern123
    Member

    this works

    thank you

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.