Internet explorer z-index issue

Question

I could find many questions on z-index issues related to internet explorer, but the solutions didn't work for me or I could not understand it correctly.

I have a form element.

Once the form submit is clicked, I want to overlay the form with a div so that nothing in the form can be clicked. For that I used an overlay which is positioned correctly and js is also working fine. It is working in chrome perfectly, but in IE8 z-index is not working.

So far I tried

1.

<div style="position:absolute; z-index:100"></div>
<form></form>

2.

<div style="position:absolute; z-index:100"></div>
<form style="position:relative; z-index:50"></form>

3.

<div style="position:relative; z-index:50">
<div style="position:absolute; z-index:100"></div>
</div>
<form style="position:relative; z-index:50"></form>

4.

<div style="position:relative; z-index:50">
<div style="position:absolute; z-index:100"></div>
<form style="position:relative; z-index:50"></form>
</div>

How can I get this working in IE8? All these works fine in chrome.

Seems like it would be easier to just disable the input elements. What are you trying to accomplish here? — Tieson T., Aug 29 '14 at 04:33
If i disable the inputs I am not getting the form inputs in the controller. Also I have a file upload and select in the screen, so readonly wont work too. — sree, Aug 29 '14 at 04:35
So, you're trying to do this prior to submitting a form? How does the form get submitted? — Tieson T., Aug 29 '14 at 04:38
You are probably doing something wrong.. i just checked and its working fine. here is the [CODE](http://jsfiddle.net/89puL7nz/2/). — Imran Bughio, Aug 29 '14 at 04:39
I am doing this via jquery if the validation passes. On clicking submit button, validation takes place and if validated successfully, overlay is displayed. — sree, Aug 29 '14 at 04:40
@ImranBughio But i tried opening ur link in IE8 and even the jsfiddle is not showing properly. Its all messed up and I cannot see anything. — sree, Aug 29 '14 at 04:50
@sree That makes more sense. I would recommend either using something that already does this, like Mike Alsup's [BlockUI](http://malsup.com/jquery/block/), or look at the source of that plugin to see how he normalizes across browsers. I can add an example implementation of that plugin if it looks like meets your needs. — Tieson T., Aug 29 '14 at 04:52
Hey thank you @TiesonT. It works fine. Could you post this as an anwser? — sree, Aug 29 '14 at 05:01
you can open the jsFiddle in full screen mode like [this](http://jsfiddle.net/89puL7nz/2/embedded/result/). — Imran Bughio, Aug 29 '14 at 06:56

Zee · Answer 1 · 2014-08-29T05:15:40.503

There is a way you can accomplish this using pure css. See the code below:

HTML:

<div align="center"> <br><br><br><br> <a href="#popup" class="button">Submit form</a> </div> <div id="popup"> <a href="#" class="cancel">&times;</a> </div> <div id="overley" > </div>

CSS:

.button { width: 150px; padding: 10px; background-color: #FF8C00; box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); font-weight:bold; text-decoration:none; }#overley{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none; }#popup { height:380px; width:340px; margin:0 auto; position:relative; z-index:10; display:none; background: red; border:5px solid #cccccc; border-radius:10px; }#popup:target, #popup:target + #overley{ display:block; opacity:2; }

score 1 · Accepted Answer · answered Aug 29 '14 at 05:10

Mike Alsup's BlockUI plugin pretty much already does what you're trying to accomplish. I use it heavily, enough that I wrote a couple of extension methods to call into the plugin with the options I always use:

if ($.blockUI) {
    /* 
    *   Extension method to display/hide loading element for long-running tasks
    *   @@requires: jquery.blockUI.js
    */
    $.fn.loading = function (opt) {
        // clear out plugin default styling 
        $.blockUI.defaults.css = {};

        if (opt === 'start') {
            this.block({
                message: '<div class="loading"><i class="fa fa-refresh fa-4x fa-spin"></i></div>',
                css: {
                    border: 'none',
                    backgroundColor: 'none',
                    color: '#fff'
                }
            });
        }
        else {
            this.unblock();
        }
    };


    /* 
    *   Extension method to display/hide viewport-wide loading element for long-running tasks
    *   @@requires: jquery.blockUI.js
    */
    $.toggleOverlay = function toggleOverlay(opt) {
        if (opt === 'start') {
            $.blockUI({
                message: '<div class="loading"><p><i class="fa fa-refresh fa-4x fa-spin"></i><p><p>Loading. Please wait...</p></div>',
                css: {
                    border: 'none',
                    backgroundColor: 'none',
                    color: '#fff'
                }
            });
        }
        else {
            $.unblockUI();
        }
    }
}

The markup I'm using assumes you're using FontAwesome as well, but that can be changed to whatever floats your boat. With these two extensions, you can either add an overlay to a specific section

$('#form').loading('start') // to start the overlay
$('#form').loading('end') // to end the overlay

or add an overlay to the entire viewport

$.toggleOverlay('start') // to start overlay
$.toggleOverlay('end') // to end overlay

Otherwise, just follow the examples on the plugin page.

Internet explorer z-index issue

2 Answers2