Particles.js在Angular 2中创建了无法点击的屏幕

我遇到了Particles.js的问题。Particles.js在Angular 2中创建了无法点击的屏幕

每当我加载粒子，搜索框变得不可点击（我仍然可以通过选择它来选择它）。

下面是问题的一个例子

搜索框是无法选择

下面是我在颗粒在我的负荷：

的index.html

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>Title</title> 
    <base href="/"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 

<body> 
    <app-root></app-root> 
    <div id="particles-js" style="position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"> </div> 
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
</body> 
</html>

而我OAD它在我的页面在这里，在我的：

landingpage.component

ngOnInit(): void { 
    //particles 
    particlesJS.load('particles-js', 'particles.json', null); 
    }

有没有错误，当我运行的页面，所以我不知道发生了什么错误。我知道这是可以修复的，因为https://rocket.chat/似乎正在做我所尝试的，并且它工作正常。

如何修复粒子以便我可以选择页面元素？

来源

2017-07-07 Edon

发现问题

我需要在我的的LandingPage容器设置的z-index来比的z-index的高我的index.html

<body> 
    <app-root></app-root> 
    <div id="particles-js" style="position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"> </div> 
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
</body>

我将我的contentContainer div分配给z-index：5

<div class="landingpageContainer"> 
    <div class="background" [ngStyle]="{'background-image':'url(' + backgroundPlaceholder.info.name + ')'}"> 
    <div class="contentContainer" style="z-index: 5;"> 
     <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=" 
     /> 
     <h1>Enter a show</h1> 
     <div class="inputBoxArea"> 
     <input type="text" class="inputArea" placeholder={{backgroundPlaceholder.info.placeholderText}} [(ngModel)]="keystroke" (ngModelChange)="getKey($event)"> 
     </div> 
     <div class="resultListArea"> 
     <ol> 
      <li (click)="setTitle(list)" [routerLink]="['/details', list.id]" *ngFor="let list of shows"> <img class="liPosters" src="https://image.tmdb.org/t/p/w92/{{list.poster}}" /> 
      <div class="title">{{list.show}}</div> (
      <div class="year">{{list.year}}</div>) 
      </li> 
     </ol> 
     </div> 
    </div> 
    </div>

来源

2017-07-07 21:38:55 Edon

Particles.js在Angular 2中创建了无法点击的屏幕

回答

相关问题