Getting jQuery UI Dialog z-index properties

Posted on 2011-10-30
Last Modified: 2012-05-12
I am creating a web application that opens a number of jQuery UI dialog windows containing all kinds of content. I am looking for a way to be able to obtain the current z-index of each dialog window so that I can store it in an array - and return the user to the exact same z-index layout of the windows at another time. This works for me with x and y properties, and also width and height, but I can't seem to get z-index to work.

Values are returned by javascript - however they are not the CURRENT z-index properties of the windows after they have been shuffled/moved around and put into a different order. They are the values set at the beginning of the page being loaded - and seem to remain fixed to this.

I am using the following code inside a function/loop to try and obtain the z-index of the windows when a 'save' button is clicked - as I said, this DOES return a value, but it doesn't seem to return the current z-index order -

var sz = document.getElementById('resizable' + x).style.zIndex;

Any help from anyone gladly appreciated.

Best regards,

Question by:dreamingmethods
    LVL 8

    Expert Comment

    This plugin may have what you are looking for.

    Author Comment

    The LAYER MANAGER: Z-INDEX MANAGEMENT COMPONENT sounds along the right lines (is this the plugin you meant?) however there are no releases here, no links to download, and I cannot find any other mention of this plugin on the web anywhere.
    LVL 8

    Accepted Solution

    Okay sorry about that...I didn't even look if it was there.

    You can use something like this to do it.

    This code when the save button is clicked will loop through the dialogs that have the class "dialogs" which I defined.  It will save them in an array by each dialog's index and allow you to arrange them by setting the z-index value in the array.

    <script type="text/javascript">
            var arr = new Array();
            $( "#dialog1" ).dialog();
            $( "#dialog2" ).dialog();
            $( "#dialog3" ).dialog();
            $( "#save" ).button().click(function(){
                    var z  = $(this).parents(".ui-dialog").css('z-index');
                        arr[index] = z;

    Open in new window

    Here is the HTML

    <div id="dialog1" class="dialogs" title="Dialog 1">Dialog 1</div>
    <div id="dialog2" class="dialogs" title="Dialog 2">Dialog 2</div>
    <div id="dialog3" class="dialogs" title="Dialog 3">Dialog 3</div>
    <div id="save">Save</div>
    <div id="arrange"></div>

    Open in new window

    Although this is just can use this way to get all the position attributes to save for re-arranging.

    Author Comment

    Absolute genius thank you - cool.

    Author Closing Comment

    This provided me with the code I needed to show a visual example of the problem in action - and the few lines of code I needed to adapt into my own to get my project working.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now