Question

我遇到的问题是我有一组与媒体查询结构相关的模态。
我需要能够一次附加所有Javascript，在每个页面大小打开两个模态。
我从getElementById转换为getElementsByClassName，它不再识别我正在制作的任何脚本调用。

HTML：

<div id="visibleForRegularSizeAndMed" class="col-md-12 hidden-sm hidden-xs no-padding backgroundImageForPage" style="height:650px">
  <div class="col-md-12">
    <div class="col-md-12 text-center" style="background-color:whitesmoke; height:250px;position:absolute;bottom:1px">
      <div class="col-md-4 centerDiv" style="border-right:1px solid black">
        <div style="display:inline-block;width:70%">
          <h3><strong class="footerBoxHeader">Listen</strong></h3>
          <p>
            <span>5 minute audio/video overview of what to expect from the online Compliance Tutorial.</span>
            <audio controls style="margin-top:51px;" id="explorerStyle">
              <source src="~/Training/Compliance/ar/10165676.mp3" type="audio/mp3" />
            </audio>
          </p>
        </div>
      </div>
      <div class="col-md-4 centerDiv" style="border-right:1px solid black">
        <div style="display:inline-block;width:70%">
          <h3><strong class="footerBoxHeader">Train</strong></h3>
          <p>
            <img class="myImg ComplianceImages" src="~/Images/complianceTraining/set1.jpg" alt="First Compliance Slide" />
          </p>
        </div>
      </div>
      <div class="col-md-4 centerDiv">
        <div style="display:inline-block;width:89%">
          <h3><strong class="footerBoxHeader">Receive Certificate</strong></h3>
          <p>
            <img class="myImg2 ComplianceImages" src="" alt="Small" />
          </p>
        </div>
      </div>
    </div>
  </div>

使用Javascript：

 // add javascript to handle popup images  in Compliance Training Section "train"
var modal = document.getElementsByClassName('myModal')[0];
var img = document.getElementsByClassName('myImg')[0];
img.onclick = function () {
    modal.style.display = "block";
}

var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
    modal.style.display = "none";
}

// add javascript to handle popup images  in Compliance Training Section "Receive Certificate"
var modal2 = document.getElementsByClassName('myModal2')[1];
var img2 = document.getElementsByClassName('myImg2')[1];
var modalImg2 = document.getElementsByClassName("img02")[1];
img2.onclick = function () {
    modal2.style.display = "block";
}

var span = document.getElementsByClassName("close")[1];
span.onclick = function () {
    modal2.style.display = "none";
}

情态动词：

<div class="modal myModal">
    <span class="close">×</span>
    <div id="carousel-example-generic">

    </div>
    </div>


<div class="modal myModal2">
    <span class="close">×</span>
    <img class="modal-content img02" src="~/Images/complianceTraining/Certificate.jpg" alt="Completion Certificate for Compliance Training">
    <div id="caption"></div>
</div>

澄清一下，调整大小实际上并没有改变页面，而是隐藏了页面的大小部分，因此隐藏了sm，hidden-xs等......

小提琴：

https://jsfiddle.net/progSrCa/3ey03wh5/

将javascript附加到屏幕上的页面元素调整大小

0 个答案: