模式弹出窗口在Codepen中工作，不在现场

Question

我一直在处理响应式模式弹出窗口，该窗口处理html文本和h​​tml5视频。 我创建了以下内容，并在Codepen上正常工作... https://codepen.io/jabbamonkey/pen/NYdZXq

但是，当我将其插入我的网站（html，css，javascript）时，代码不起作用。 当我单击PLAY VIDEO按钮（在该人的圆形照片下面）时，模态JavaScript似乎与我的顶级导航栏JavaScript混在一起了……但是我看不到与JavaScript有任何冲突。 在CodePen中，我看到了模式弹出窗口……但是在我的网站上，它们不起作用。 我找不到问题，需要帮助。

我正在工作的网站位于http://www.amazingdg.com/_client/a/

该代码全部在codepen上，而我的网站显示了所有其他代码。 我还将包括以下代码...

HTML：

<a href="#" class="modal-trigger" data-modal="modal-name1">Play Video</a>
 <div class="modal" id="modal-name1">
          <div class="modal-box">
            <video autoplay loop muted preload="auto" style="width:100% !important; height:auto !important;">
                <source src="video/video-home.mp4" type="video/mp4" />
                <!-- <source src="http://yourwebsite.com/your-video-file.ogg" type="video/ogg"/>
                <source src="http://yourwebsite.com/your-video-file.webm" type="video/webm"/> -->
            </video>
            <button class="close-modal">Close!</button>
          </div>
        </div>

CSS：

.modal,
.modal-box {
  z-index: 99999;
}

.modal { /* overlay*/
  display: none; 
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgb(0,0,0);
  background: rgba(0,0,0,.8);
  overflow: auto;
}

.modal-box { /* box with content */
  background:#FFF;
  position: relative;
  width: 80%;
  padding:20px;
  max-width: 920px;
  margin: 100px auto;
  animation-name: modalbox;
  animation-duration: .3s;
  animation-timing-function: ease-out;
}

/* Close Button */
.close-modal {
  text-align: right;
  cursor: pointer;
}

/* Animation */
@-webkit-keyframes modalbox {
  0% {
    top: -250px; 
    opacity: 0;
  }
  100% {
    top: 0; 
    opacity: 1;
  }
}

@keyframes modalbox {
  0% {
    top: -250px; 
    opacity: 0;
  }
  100% {
    top: 0; 
    opacity: 1;
  }
}

JavaScript：

//***************************//
// Menu Button        
jQuery(document).ready(function(){
    jQuery('#nav-icon').click(function(){
        jQuery('#mainmenu').toggleClass('menuview');
        jQuery(this).toggleClass('open');
    });
}); 



//***************************//
// Slide Menu
$(function() {
  $(window).scroll(function() {
    var winTop = $(window).scrollTop();
    if (winTop >= 30) {
      $("#topbar").addClass("sticky-nav");
      $("#navdemo").addClass("navdemoon");
      $("#subnav1").addClass("submenudrop");
      $("#subnav2").addClass("submenudrop");
      $("#mainnav1").addClass("menudroppad");
      $("#mainnav2").addClass("menudroppad");
    } else {
      $("#topbar").removeClass("sticky-nav");
      $("#navdemo").removeClass("navdemoon");
      $("#subnav1").removeClass("submenudrop");
      $("#subnav2").removeClass("submenudrop");
      $("#mainnav1").removeClass("menudroppad");
      $("#mainnav2").removeClass("menudroppad");
    }
  })
})


//***************************//
// Video Popup Lightbox
$(".modal-trigger").click(function(e){
  e.preventDefault();
  dataModal = $(this).attr("data-modal");
  $("#" + dataModal).css({"display":"block"});
});

$(".close-modal, .modal-sandbox").click(function(){
  $(".modal").css({"display":"none"});
});


//***************************//
/* Video Preloader*/
var video = document.getElementById("featvideo");
var url = "../video/video-home.mp4";
var progressBar = document.getElementsByClassName('.progress-bar')[0];

var xhr = new XMLHttpRequest();
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";
xhr.onload = function(oEvent) {
  var blob = new Blob([oEvent.target.response], {type: "video/mp4"});
  video.src = URL.createObjectURL(blob);
};
xhr.onprogress = function(oEvent){
  if(oEvent.lengthComputable) {
    var percentComplete = (oEvent.loaded/oEvent.total)*100;
    var completion = Math.round(percentComplete) + '%';
    progressBar.setAttribute('valuenow', completion);
    progressBar.style.width = completion + '%';
    progressBar.innerHtml = completion + '%';
  }
}
xhr.send();

Answer 1

似乎问题在于单击事件未附加到按钮。 为了确保即使在页面加载时按钮不在DOM中也能正常工作，您可以执行以下操作：

$("body").on("click", ".modal-trigger", function(e){
  e.preventDefault();
  dataModal = $(this).attr("data-modal");
  $("#" + dataModal).css({"display":"block"});
});

另外，如果您不希望按钮返回页面顶部，请将href="#"更改为href="javascript:void(0)" 。

编辑：

我在您的网站上看到了问题。 您将代码放入标头部分，因此您还没有任何DOM元素。 您需要移动这条线

<script src="http://www.amazingdg.com/_client/a/javascript/javascript.js"></script>

到body末尾，以确保每个DOM元素都已加载，因此您可以使用JS将事件处理程序附加到其上...另一种使其工作的方法是将所有JavaScript放入$(document).ready处理程序中。