javascript - 未捕获的 DOMException : Not able to run codepen code on my html page

Question

我试图通过这个 link 实现动画弹出模式.

我仔细地复制了我的 Bootstrap 模板中的所有代码。现在，当我尝试运行它时，它只显示一个根本不起作用的按钮。然后我在 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);
}

请指导我解决这个问题。 P.S-我不擅长 JS

Answer 1

问题是您的 #modal-1 元素不是 body 容器的子元素，因为您从中获取代码的 codepen 就是这种情况。它是带有 background:url(images/Elaxer-Screen.png) 的未命名 div 的子元素，这就是它给您错误的原因。您只需添加一个父容器并在您的 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");

第三步:去掉第76行的body变量，使用parent容器变量。

parentCont.removeChild(container);

这是对我的代码笔的引用:my codepen

工作正常。祝您好运，希望这对您有所帮助!