Internet Explorer z-index问题

我可以在与Internet Explorer有关的z-index问题上找到许多问题，但解决方案对我无效或者我无法正确理解它。Internet Explorer z-index问题

我有一个表单元素。

一旦表单提交被点击，我想用div覆盖表单，这样表单中的任何内容都不能被点击。为此，我使用了正确放置的叠加层，并且js也正常工作。它完美地工作在Chrome中，但在IE8中，z-index不起作用。

到目前为止，我试过

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

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

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

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

我怎样才能在IE8中工作？所有这些在铬合金工作正常。

来源

2014-08-29 sree

似乎只是禁用输入元素会更容易。你想在这里完成什么？ – 2014-08-29 04:33:30

如果我禁用输入，我没有得到控制器中的表单输入。另外我有一个文件上传和选择在屏幕上，所以只读不会工作。 – sree 2014-08-29 04:35:24

因此，您在提交表单之前尝试做到这一点？表单如何提交？ – 2014-08-29 04:38:18

迈克Alsup的BlockUI插件几乎已经做到你想做到什么。我用它在很大程度上，足够我写一对夫妇的扩展方法调用与选项的插件我总是用：

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

我使用的是假设你使用FontAwesome还有的标记，但可以改成任何漂浮你的船。有了这两个扩展，您可以覆盖添加到特定部分

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

或添加叠加层到整个视口

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

否则，只需按照该插件页面上的例子。

来源

2014-08-29 05:10:14

有一种方法可以使用纯CSS来完成此操作。请参见下面的代码：

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

来源

2014-08-29 05:05:29 Zee

Internet Explorer z-index问题

回答

相关问题