Question

I am trying to solve a z-index problem with the jQuery UI Dialog, similar to question Can't select or deselect checkboxes inside jQuery UI Modal Dialog , knowing there is a bug report out there.

So in trying to up the z-index as recommended, I added the following code:

$('#interface').click(function(evform){
  $('#interface').prop('z-index')=99999;
});

where the chrome and firefox console.log states:

Uncaught ReferenceError: Invalid left-hand side in assignment

HOWEVER, despite the error, the checkbox now works (throwing the console error every time). If I remove the offending line, the checkbox becomes “unclickable”. How can I properly code this?

My HTML:

<div id="dialog" title="Loading...">
    <p id="interface">Loading...</p>
</div>

(by the way, I tried adding inline style to the <p>, and it didn’t work:

<p id="interface" style="z-index:99999">Loading...</p>

And with AJAX, I replace the contents of ‘#interface’ with valid checkbox html such as:

<label for="right">
  <input name="right" type="checkbox">
</label>

and I have the usual jQuery/Dialog UI files included.

One final note, I tried to get creative, since this wasn’t working and manually switch the checkbox by:

if ($(evform.target).prop('type')=="checkbox"){
      $(evform.target).checked;
}

* EDIT UPDATE *

As of December 22, 2013 (the EDGE pre release) of jQuery core, this bug has been fixed. I hope they release the stable version soon (I beleive it will be v1.10)! You can test it in a jfiddle at: http://jsfiddle.net/tj_vantoll/XXGQA/

http://bugs.jqueryui.com/ticket/6267

Answer 1

You have to set the z-index on #dialog, not #interface.

Your code is throwing an error because you’re trying to assign a value to a function call. So your code should be:

$('#interface').click(function(evform){
  $('#dialog').css('z-index', 99999);
});

Or just this on your CSS:

#dialog { z-index: 99999; }

UPDATE

This solution is not bullet-proof. The bug report filed for jQueryUI states that the problem happens if the checkboxes have a z-index lower than the overlay below the dialog. jQueryUI seems to be comparing z-indexes in an absolute manner, which goes against the CSS standard (but is understandable, considering a proper comparison would probably be resource-intensive).

So the actual solution may depend on which elements you’re setting z-index (and position) inside the dialog. To avoid the bug, no not use z-index inside the dialog, or set a value guaranteed to be higher than what will be (dynamically) assigned to the overlay (hence, my 99999 suggestion).