Bootstrap Modal not working in IE, tried all other solutions on Stack

Question

I have tested these solutions already: Modal not opening in IE

-I added the Edge in Meta head of my page, I tried to remove the fade class in jquery but still no luck, nothing happens on click.

-My internet explorer inspect console doesn't not show any errors.

-I wanted to make a codepen but it is not supported in IE9!

I used latest bootstrap and jquery files.

I am using Virtual Box Windows 7 on Mac and Internet explorer 9 within the emulator. I also tried in actual windows on someone else's computer and the same problem occurs.

Here is a link to the page I am working on, the modal is used on the last 6 big pictures right at the bottom (on the blog). I need it to work back to IE9. It works fine in Firefox and Chrome.

Here is my modal code:

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

Here is my html that should open the modal when clicked:

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

Thank you.

Answer 1

I found the solution by making sure:

-I wrapped my modal section with a div with a class of container.

-Making sure the modal html was directly after my button

-Making sure my attributes and classes matched a working copy of the modal I found online.

This is the Internet Explorer working copy I found:

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