javascript - 未捕获的 DOMException:无法在我的 html 页面上运行 codepen 代码
问题描述
我试图从这个链接实现动画弹出模式。
我仔细复制了引导模板中的所有代码。现在,当我尝试运行它时,它只显示一个根本不起作用的按钮。然后我检查chrome中的开发人员选项我看到了这个错误
`Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at createModal (file:///C:/Users/file:///C:/Users/xyz/Desktop /js/popvideo.js:75:8)
at file:///C:/Users/xyz/Desktop/js/popvideo.js:4:13`
在 popvideo.js 的第 75 行有这个代码 `body.removeChild(container);
当笔工作正常时,我不明白何时收到此错误。
这是竞争代码
<section class="hero-area">
<div id="homelink"> </div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="block">
<h1 class="wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".3s" >Lorem ipsum dolor sit amet.</h1>
<p class="wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".5s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis excepturi ut inventore consectetur quos rerum quibusdam accusamus, labore itaque assumenda consequatur cum saepe velit quidem ipsa facilis. Repellendus, reiciendis quam?</p>
<ul class="list-inline wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".7s">
<li>
<a data-scroll href="#contact" class="btn btn-main">Register</a>
</li>
</ul>
</div>
<div style="margin-top:100px; height:506px; width:332px; float: right; background:url(images/Elaxer-Screen.png)">
<section class="controls">
<button id="open-button">Open</button>
</section>
<section id="modal-1" class="modal-container">
<div class="modal-dialog">
<svg class="modal-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon class="modal-polygon" />
</svg>
<div class="modal-content">
<h2>I'm a modal</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis excepturi ut inventore consectetur quos rerum quibusdam accusamus, labore itaque assumenda consequatur cum saepe velit quidem ipsa facilis. Repellendus, reiciendis quam?</p>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</section>
`
JS-popvideo.js
console.clear();
var body = document.body;
var modal = createModal(document.querySelector("#modal-1"));
var openButton = document.querySelector("#open-button");
openButton.addEventListener("click", function() {
modal.open();
});
function createModal(container) {
var content = container.querySelector(".modal-content");
var dialog = container.querySelector(".modal-dialog");
var polygon = container.querySelector(".modal-polygon");
var svg = container.querySelector(".modal-svg");
var point1 = createPoint(45, 45);
var point2 = createPoint(55, 45);
var point3 = createPoint(55, 55);
var point4 = createPoint(45, 55);
var animation = new TimelineMax({
onReverseComplete: onReverseComplete,
onStart: onStart,
paused: true
})
.to(point1, 0.3, {
x: 15,
y: 30,
ease: Power4.easeIn
}, 0)
.to(point4, 0.3, {
x: 5,
y: 80,
ease: Power2.easeIn
}, "-=0.1")
.to(point1, 0.3, {
x: 0,
y: 0,
ease: Power3.easeIn
})
.to(point2, 0.3, {
x: 100,
y: 0,
ease: Power2.easeIn
}, "-=0.2")
.to(point3, 0.3, {
x: 100,
y: 100,
ease: Power2.easeIn
})
.to(point4, 0.3, {
x: 0,
y: 100,
ease: Power2.easeIn
}, "-=0.1")
.to(container, 1, {
autoAlpha: 1
}, 0)
.to(content, 1, {
autoAlpha: 1
})
var modal = {
animation: animation,
container: container,
content: content,
dialog: dialog,
isOpen: false,
open: open,
close: close
};
body.removeChild(container);
function onClick() {
if (modal.isOpen) {
close();
}
}
function onStart() {
body.appendChild(container);
container.addEventListener("click", onClick);
}
function onReverseComplete() {
container.removeEventListener("click", onClick);
body.removeChild(container);
}
function open() {
modal.isOpen = true;
animation.play().timeScale(2);
}
function close() {
modal.isOpen = false;
animation.reverse().timeScale(2.5);
}
function createPoint(x, y) {
var point = polygon.points.appendItem(svg.createSVGPoint());
point.x = x || 0;
point.y = y || 0;
return point;
}
return modal;
}
CSS
/*Pop Up Video*/
.buttonpop {
cursor: pointer;
padding: 0 6px;
min-width: 88px;
min-height: 36px;
}
.controls {
padding: 24px;
}
.modal-container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100vh;
overflow: hidden;
background: rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
}
.modal-dialog {
width: 70vmin;
height: 70vmin;
position: relative;
overflow: hidden;
}
.modal-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal-polygon {
fill: #ab47bc;
}
.modal-content {
position: relative;
top: 0;
left: 0;
padding: 24px;
visibility: hidden;
opacity: 0;
color: rgba(255, 255, 255, 0.87);
}
请指导我解决此问题。PS-我不擅长JS
解决方案
问题是您的#modal-1
元素不是 body 容器的子元素,因为您从中获取代码的 codepen 就是这种情况。它是带有 的未命名 div 的孩子background:url(images/Elaxer-Screen.png)
,这就是它给你错误的原因。您可以简单地做的是添加一个父容器并在您的 js 文件中引用它。
这是我的做法:
第 1 步:通过添加 parentContainer id 来编辑您的 HTML 文件。
<div id="parentContainer" style="margin-top:100px; height:506px; width:332px; float: right; background:url(images/Elaxer-Screen.png)">
<section class="controls">
<button id="open-button">Open</button>
</section>
<section id="modal-1" class="modal-container">
<div class="modal-dialog">
<svg class="modal-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon class="modal-polygon" />
</svg>
<div class="modal-content">
<h2>I'm a modal</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis excepturi ut inventore consectetur quos rerum quibusdam accusamus, labore itaque assumenda consequatur cum saepe velit quidem ipsa facilis. Repellendus, reiciendis quam?</p>
</div>
</div>
</section>
</div>
第 2 步:将父容器初始化为变量。
var parentCont = document.querySelector("#parentContainer");
第 3 步:删除第 76 行的 body 变量并使用父容器变量。
parentCont.removeChild(container);
这是对我的代码笔的参考:我的代码笔
工作正常。祝你好运,希望这能帮到你!
推荐阅读
- r - R中恐龙的祖先状态重建
- java - 有没有办法一次初始化 Guava 缓存?
- json - 在 Swift 中重新创建一个“合并表”
- javascript - Gatsby 文件系统路由 API:每个数组项的唯一页面
- cmake - 致命错误:kestrel.hh:没有这样的文件或目录
- python - 在 asyncio.subprocess 中与进程的 stdin 和 stdout 通信
- python - 如何在 Pycharm 中安装 zip 包
- javascript - 如果服务器存在没有CORS的JavaScript,有什么方法可以有效地记录?
- node.js - Unirest 发送多个请求(Node JS)
- web - 有没有办法恢复我已删除的 GPC 网站?