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問題

回答

相關問題