TwitterからのブートストラップIE7のバグ

Question

IE7で作成したサイトにバグが見つかりました。サイトの

URL：IE7で製品を開くとhttp://moldipaints-dokkum.nl/productcontroller/getProductList/19

ブートストラップモーダルは、ページの背後にあるグレーのオーバーレイが上にあります。画像はモーダルの上にあります。

Iは、以下の変更：

CSS z屈折率の相対的/絶対/（のみモーダルが正しく表示されない）固定：（いない任意の差）

潜在的修正ツイッターを

CSSの位置を（Github）; http://jsfiddle.net/ATeaH/8/

これらはどれも正しいものではありません。この仕事をするために私は何ができますか？プロジェクトから

更新コード

<?php 
    if(isset($productByType)){ 
     $countwidth = (count($productByType)/2)*260+100; 
    }?> 



    <div class="productView"> 
     <div class="aligndiv"> 
      <div class="productcenter"> 
       <div class="productenview"> 
        <div class="productcontainer" style="width:<?=@$countwidth?>px;" > 
         <?php 
         if(!empty($productByType)){ 
         for($i=0;$i < count($productByType); $i++){ 

         $id = $productByType[$i]['id']; 
         $title = $productByType[$i]['title']; 
         $img = base_url('/img/producten/'.$productByType[$i]["img"]); 

         if($i % 2 == 0){ 
          echo '<div class="seperatorforproduct">'; 
         //0,2,4,6,8 
         } 

        echo '<div class="button btnstyle">'; 
        echo '<div class="imgbtn">';  
        // <!-- afbeelding --> 
        echo '<img src="'.$img.'" title="'.$title.'" alt="'.$title.'" data-toggle="modal" href="#modal'.$id.'" />'; 
        echo '</div>'; 
        echo '<div class="txtbtn txtstyle">'; 
        echo '<a class="btn" data-toggle="modal" href="#modal'.$id.'" >'.$title.'</a>'; 
        echo '</div>'; 
        echo '</div>'; 
        ?> 
        <div class="modal" style="display:none;" id="modal<?=$id?>"> 
         <div class="modal-header"> 
          <a class="close" data-dismiss="modal">&times;</a> 
          <h2><?=$title?></h2> 
         </div> 
         <div class="modal-body"> 
          <div class="modal-left"> 
          <img src="<?=$img?>" title="<?=$title?>" alt="<?=$title?>" /> 
          </div> 
          <div class="modal-right"> 
          <p><?=$productByType[$i]['info']?></p> 
          </div> 
         </div> 
         <div class="modal-footer"> 
          Neem contact op met Moldipaints-Dokkum.nl voor meer informatie, telefoonnummer: 0519-297409 
         </div> 
        </div> 

        <?php 
        if($i % 2 == 1 || $i == count($productByType)){ 
         // 0,3,6,9,12 
         echo '</div>'; 
        } 
       }  
      }?> 
     </div> 
    </div> 
</div> 

CSSブートストラップをレンダリングするページ

.modal-backdrop { 
     position: fixed; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     z-index: 10; 
     background-color: #000000; 
    } 
    .modal { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     z-index: 1000; 
     min-height: 500px; 
     width: 700px; 
     margin: -275px -380px; 
     background-color: #ffffff; 
     border: 1px solid #999; 
     border: 1px solid rgba(0, 0, 0, 0.3); 
     *border: 1px solid #999; 
     /* IE6-7 */ 

     -webkit-border-radius: 6px; 
     -moz-border-radius: 6px; 
     border-radius: 6px; 
     -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
     box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
     -webkit-background-clip: padding-box; 
     -moz-background-clip: padding-box; 
     background-clip: padding-box; 
     } 

CSSスタイルプロジェクト

/* Producten */ 
    .productView{position:absolute; width:100%; height:700px; top:50px; margin:auto;} 
    .aligndiv{position:relative; width:1024px; margin:auto;} 
    .productcenter{width:1024px; height:500px; margin:auto;} 
    .productenview{position:relative; width:480px; height: 600px; overflow-x:scroll; overflow-y:hidden; float:left; left:10%; margin:auto; margin-right:300px} 
    .productcontainer{height: 400px; margin-top:90px; z-index:0;} 
    .productmenu{position:absolute; width:300px; top:100px; right:5%; z-index:0;} 
    .seperatorforproduct{position:relative; width:240px; height:480px; float:left;} 

ありがとうございました

Answer 1

IE7のモーダルポップアップで同じ問題が発生しました。モーダルダイアログがモーダルバックグラウンドの下に表示されました。しかし、このJavaScriptを追加することが私のための問題は解決しました：

$('.fixedVersion .modal').appendTo($("body")); 

ここ

詳細：http://jsfiddle.net/ATeaH/8/

Answer 2

私は同じ問題を持っていたし、1で問題を修正することになった）ことを確認すべての私のモーダルダイアログがた作りはHTML階層でネストされている必要はなく、ルートレベル（<body>の右側）と2）HTMLドキュメントの最後にあります。

上記の2つの条件は少し過度のものかもしれませんが、私の問題を解決しました。