在所有浏览器中打开模态，但在IE中不

Question

Modal在Internet Explorer中不起作用。在所有其他浏览器中均可使用。这是模态在一页中打开多个模态。在IE中没有任何显示。我不确定为什么会这样。也许显示块不起作用或某些内容被删除。

这是codepen链接：https://codepen.io/davisrousseaudesign/pen/NObJOx

(function iife() {
    "use strict";
    
    var modelOne = `<div id="modalOne" class="modal-promo">
                      <div class="modal-content">
                        <div class="modal-close-btn"><a class="close">&times;</a></div>
                        <div class="modal-img-grid">
                          <div class="modal-img-item" style="background-image: url(https://i.shgcdn.com/618b2cd6-04c9-427b-82a1-1a36c86103f1/-/format/auto/-/preview/3000x3000/-/quality/lighter/);"></div>
                        </div>
                        <div class="modal-content-holder">
                          <h3>99% On-Time Delivery</h3>
                          <p>On-Time Delivery of quality product is often cited as the most critical driver of supplier performance. Berlin Packaging has 14 years of 99% on-time delivery.</p><p><a href="/results/99-percent-on-time-delivery/">Learn More</a></p>
                        </div>
                      </div>
                    </div>

                    <div id="modalTwo" class="modal-promo">
                      <div class="modal-content">
                        <div class="modal-close-btn"><a class="close">&times;</a></div>
                        <div class="modal-img-grid">
                          <div class="modal-img-item" style="background-image: url(https://cdn8.bigcommerce.com/s-ngl50e21gh/product_images/uploaded_images/shipping-boxes-2.jpg?t=1538579791&_ga=2.54484651.249018383.1538369968-721942848.1525280157);"></div>
                        </div>
                        <div class="modal-content-holder">
                          <h3>Free Shipping Over $250</h3>
                          <p>Free parcel shipping on orders over $250, online only. Orders must contain $250 or more in merchandise value (not including taxes, shipping & handling, or any other fees) and ship via parcel carrier. Exclusions apply.</p> <p><a href="/terms-and-conditions/terms-and-conditions-of-website-and-ecommerce/">See full Terms & Conditions.</a></p>
                        </div>
                      </div>
                    </div>
                    
                    <div id="modalThree" class="modal-promo">
                      <div class="modal-content">
                        <div class="modal-close-btn"><a class="close">&times;</a></div>
                        <div class="modal-img-grid">
                          <div class="modal-img-item" style="background-image: url(https://i.shgcdn.com/a50999b8-76ed-46b0-a668-270c8639293b/-/format/auto/-/preview/3000x3000/-/quality/lighter/);"></div>
                        </div>
                        <div class="modal-content-holder">
                          <h3>Large In-Stock Selection</h3>
                          <p>Over 10,000 items available to ship when you need them. Build a custom solution by selecting a container, cap, shrink brand and customized label. Start shopping now.</p>
                        </div>
                      </div>
                    </div>
                    
                    <div id="modalFour" class="modal-promo">
                      <div class="modal-content">
                        <div class="modal-close-btn"><a class="close">&times;</a></div>
                        <div>
                          <iframe id="youtube_video" width="100%" height="340"  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                        </div>
                      </div>
                    </div>`;

    $("body").append(modelOne);
    
    var youtube_video = $('[data-modal="modalFour"]').attr('data-url');
    $("#youtube_video").attr('src', youtube_video+'?start=0&end=0&autoplay=0&loop=0&rel=0&showinfo=1&enablejsapi=1&origin=https%3A%2F%2Ftest.berlinpackaging.com')
    
    function closestEl(el, selector) {
        var doc = el.document || el.ownerDocument;
        var matches = doc.querySelectorAll(selector);
        var i;
        while (el) {
            i = matches.length - 1;
            while (i >= 0) {
                if (matches.item(i) === el) {
                    return el;
                }
                i -= 1;
            }
            el = el.parentElement;
        }
        return el;
    }
    var modalBtns = document.querySelectorAll(".perks-button, .video-button");
    modalBtns.forEach(function addBtnClickEvent(btn) {
        btn.onclick = function showModal() {
            var modal = btn.getAttribute("data-modal");
            document.getElementById(modal).style.display = "block";
        };
    });

    var closeBtns = document.querySelectorAll(".close");
    closeBtns.forEach(function addCloseClickEvent(btn) {
        btn.onclick = function closeModal() {
            var modal = closestEl(btn, ".modal-promo");
            modal.style.display = "none";
            youtubeStop();
        };
    });

    window.onclick = function closeOnClick(event) {
        if (event.target.className === "modal-promo") {
            event.target.style.display = "none";
            youtubeStop();
        }
    };
    
    function youtubeStop() {
      var frame = document.getElementById("youtube_video");
      frame.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*'); 
    }
}());

/* Modal Content/Box */

.modal-content-holder {
  padding: 20px;
}
.modal-img-grid {
  width: 100%;
  display: block;
  position: relative;
  padding-bottom: 0%;
  height: 150px;
  overflow: hidden;
}

.modal-img-item {
  height: 100%;
  margin: 0;
  background-position: 50% 50%;
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
  background-origin: border-box;
  background-size: cover;
  transition: all 1s ease;
}

.modal-close-btn {
    background-color: #FFF;
    padding: 0 20px;
    position: relative;
    text-align: right;
}

.modal-content {
  border: 1px solid #d8d8d8;
  border-radius: 2px;
}
@media (min-width: 1366px) {
.modal-content {
  border: 1px solid #d8d8d8;
  border-radius: 2px;
}
}

/* The Close Button */
.close {
    color: #0071BC;
    font-size: 28px;
    font-weight: normal;
}

.close:hover,
.close:focus {
    color: #c4161c;
    text-decoration: none;
    cursor: pointer;
}

a.perks-button {
    color: #231f20;
    background: none;
    border: none;
}

a.perks-button:hover {
  color:#c4161c;
}
'
  .perks-grid {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin-left: -0.25em;
    margin-right: -0.25em;
    margin-bottom: 0;
    list-style: none;
}

.perks-grid button {
    font-size: 0.875em;
    line-height: 1.429em;
    padding: 0 1em;
}

.perks-grid button {
  color:#231f20;
    margin-bottom: 0;
    text-transform: none;
    font-weight: 500;
}

.perks-items {
    text-align: center;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
   margin-bottom: 0; 
}

.perks-items:nth-child(2) {
    border-right: 1px solid #d8d8d8;
    border-left: 1px solid #d8d8d8;
}

/* Popup Box */

/* The Modal (background) */

/* Modal Content/Box */
.modal-content {
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    max-width: 100%;
    height: auto;
    max-height: 100%;
}

@media (min-width: 1366px) {
.modal-content {
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    max-width: 100%;
    height: auto;
    max-height: 100%;

}
}

/* The Close Button */
.close-promo {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-promo:hover,
.close-promo:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.perks-items:nth-child(2) {
    border-right: 1px solid #d8d8d8;
    border-left: 1px solid #d8d8d8;
}

a.perks-button {
    color: #231f20;
    background: none;
    border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="perks-grid">
  <div class="perks-items">
    <a class="perks-button" data-modal="modalOne">99% On-Time Delivery</a>
  </div>
  
  <div class="perks-items">
    <a class="perks-button" data-modal="modalTwo">Free Online Shipping Over $250</a>
  </div>

  <div class="perks-items">
    <a class="perks-button" data-modal="modalThree">Large In-Stock Selection</a>
  </div>
</div>



<a href="https://www.berlinpackaging.com/">Link To site</a>