Bootstrap Modal 在 IE 中不起作用，在 Stack 上尝试了所有其他解决方案

Question

我已经测试过这些解决方案： Modal not opening in IE

-我在页面的 Meta 头部添加了 Edge，我尝试在 jquery 中删除淡入淡出类，但仍然没有成功，点击时没有任何反应。

-我的 Internet Explorer 检查控制台没有显示任何错误。

-我想做一个codepen，但IE9不支持！

我使用了最新的 bootstrap 和 jquery 文件。

我在 Mac 上使用 Virtual Box Windows 7，在模拟器中使用 Internet Explorer 9。我也在其他人的电脑上尝试过实际的windows，也出现了同样的问题。

这是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>

谢谢。

Answer 1

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

-我用一个带有容器类的 div 包裹了我的模态部分。

-确保模态 html 直接位于我的按钮之后

-确保我的属性和类与我在网上找到的模式的工作副本相匹配。

这是我找到的 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>