Question

我一直在处理一个响应式模式弹出窗口，它处理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-entity autoscale="2" gltf-model="stereo.gltf"></a-entity>

CSS：

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

JavaScript的：

.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;
  }
}

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处理程序。

模态弹出窗口在codepen中工作，而不是在站点上

1 个答案: