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.

Answer 1

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; }

Answer 2

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.