引导模态并不在IE工作,试图对堆栈

问题描述:

所有其他解决方案

我已经测试了这些解决方案已经: Modal not opening in IE引导模态并不在IE工作,试图对堆栈

-I添加在我的网页的Meta头的边缘,我试图删除jQuery的淡入淡出类但仍然没有运气,点击上没有任何反应。

-My Internet Explorer检查控制台不会显示任何错误。

- 我想做一个codepen,但它不支持IE9!

我使用了最新的引导程序和jquery文件。

我在模拟器中的Mac和Internet Explorer 9上使用Virtual Box Windows 7。我也在别人的电脑上的实际窗口中尝试过,并发生同样的问题。

这里是a link to the page我正在研究,最后的6张大图片在底部(在博客上)使用模态。我需要它回到IE9。它在Firefox和Chrome中运行良好。

这里是我的模态代码:

   <!-- Modal Pop Up Window 1--> 
      <div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
      <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"> 

       <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
        <div class="flipper"> 
         <div class="front"> 
          <img class="close_img" src="http://assets.newlook.com/testing/activewear/images/modal_close.jpg" alt="Close this pop up"> 
         </div> 
         <div class="back"> 
          <img class="close_img" src="http://assets.newlook.com/testing/activewear/images/modal_close.jpg" alt="Close this pop up"> 
         </div> 
        </div> 
       </div> 

      </span></button> 
      </div> 
      <div class="modal-body"> 
      <div class="col-xs-12 col-md-6"> 
       <img src="http://assets.newlook.com/testing/activewear/images/modal_img_1.jpg" alt="New look Lookbook" /> 
      </div> 
      <div class="col-xs-12 col-md-6"> 
       <h4 class="modal_title">Title here</h4> 
       <p class="modal_copy"> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore <span class="nowrap">magna aliqua.</span> 
       </p> 
       <div class="btn-cont"> 
       <a href="javascript:void(0)"><div class="btn"><span>CTA HERE</span></div></a> 
       </div> 
      </div> 
      </div> 
      <div class="modal-footer"> 
      </div> 
      </div> 
      </div> 
      </div> 
      <!--End of modal 1--> 

这里是我的html点击时应该打开模式:

  <div class="col-xs-12 col-sm-6 col-md-4"> 
    <div class="grid"> 
    <h3 class="overlay_title">How to gain <br/>More Muscle</h3> 
    <figure class="effect-jazz"> 
    <img id="last_cta_1" class="lazyload" src="http://assets.newlook.com/testing/activewear/images/last_cta_1.jpg" alt="Training"/> 
    <figcaption> 
    <!--<p>How and when<br/>to lift steel.</p>--> 
    <a href="javascript:void(0)" data-toggle="modal" data-target="#Modal1">View more</a> 
    </figcaption>   
    </figure> 
    </div> 
    </div> 

谢谢。

我找到了解决方案通过确保:

-I包裹着我的语气段与一类容器的DIV。

-Making确保HTML模式是我的按钮

-Making后直接确定我的属性和类匹配的我在网上找到的模式的工作副本。

这是Internet Explorer的工作拷贝,我发现:

<div class="container"> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-1">Activate the button</button> 
    <div class="modal fade" id="modal-1"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h3 class="modal-title">This is the heading</h3> 
       </div> 
       <div class="modal-body"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at pharetra sapien. Nulla scelerisque ex eget ligula ornare, vel efficitur quam dictum. Proin malesuada posuere risus suscipit mattis. Suspendisse potenti. Donec et odio nibh. Praesent auctor erat at nunc gravida tincidunt. Ut facilisis, ex ultricies scelerisque aliquam, ex lectus fermentum urna, quis auctor eros ante non dui. 
       </div> 

       <div class="modal-footer"> 
        <a href="" class="btn btn-default" data-dismiss="modal">Close</a> 
        <a href="" class="btn btn-primary">Download</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
+0

添加周围的模态容器固定我的问题! – KSF