模态弹出窗口在代码笔中工作，而不是在现场

Question

我一直在开发响应式模式弹出窗口 window，它可以处理 html 文本和 html5 个视频。我创建了以下内容，它在 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)"。

编辑：

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

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

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

模态弹出窗口在代码笔中工作，而不是在现场

modal popup works in codepen, not on site

javascript

jquery

popup