jquery - 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>