jQuery UI Widgets › Forums › Editors › Input, Password Input, TextArea, ColorPicker, Rating, TagCloud, Loader › jxqLoader modal on top of other windows

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  ivailo 9 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    jxqLoader modal on top of other windows Posts
  • November 4, 2015 at 8:57 am jxqLoader modal on top of other windows #77729

    jonno
    Participant

    Hi Folks,

    I’m attempting to use jqxLoader as modal and on top of every other window.
    I can’t seem to make jqxLoader appear on top of other jqxWindows.
    In my attempts; jqxLoader seems to appear behind jqxWindow.

    How to i get it to be in the forefront?

    here is the code i’m testing it with.

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title>jQuery Loader Styling Sample</title>

    <script type=”text/javascript” src=”../scripts/jquery.js”></script>
    <link rel=”stylesheet” href=”../scripts/jqwidgets-ver3.9.1/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../scripts/jqwidgets-ver3.9.1/jqwidgets/jqx-all.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {

    $(“#jqxwindow”).jqxWindow({ isModal:true, height:300, width: 300, theme: ‘summer’ , autoOpen: false});

    $(“#openLoader”).jqxButton({
    width: 150,
    theme: “metro”
    });

    $(“#jqxLoader”).jqxLoader({ width: 150, height: 150, isModal: true, theme: “metro” });

    $(‘#openLoader’).on(‘click’, function () {
    $(‘#jqxwindow’).jqxWindow(‘open’);
    $(‘#jqxLoader’).jqxLoader(‘open’);
    });
    $(“#closeLoader”).jqxButton({
    width: 100,
    theme: “metro”
    });
    $(‘#closeLoader’).on(‘click’, function () {
    $(‘#jqxLoader’).jqxLoader(‘close’);
    $(‘#jqxwindow’).jqxWindow(‘close’);
    });
    });
    </script>
    </head>
    <body>
    <div id=’jqxwindow’>
    <div>Header</div>
    <div>Content</div>
    </div>

    <div id=”jqxLoader”>
    </div>
    <input type=”button” value=”Open Loader” id=”openLoader” />
    <input type=”button” value=”Close” id=”closeLoader” />
    </body>
    </html>

    November 4, 2015 at 10:56 am jxqLoader modal on top of other windows #77737

    ivailo
    Participant

    Hi jonno,

    You can set the z-index of the widgets with CSS.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.