Web 组件中页面加载时的模式弹出窗口

Posted 2023-02-23

【中文标题】Web 组件中页面加载时的模式弹出窗口

【英文标题】：modal popup on pageload in web component

【发布时间】：2019-08-09 14:51:41

【问题描述】：

我是 lit-element 的新手，我想使用 litelement 创建一个模态组件，模态应该在页面加载时显示并在 20 秒后自动关闭。 这是我的代码 sn-p：

import  LitElement, html  from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';

export class Modal extends LitElement 

  connectedCallback()
    super.connectedCallback();
    this.modalTimer();
  

  modalTimer()       
    this.shadowRoot.getElementById("modalContainer").classList.remove('show');
  

  render() 
    return html`
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">  
      <style>
        .modalContainer 
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background: black;
          opacity: 0.5;
          z-index: 10;
          display: none;
            
        .modal 
          width: 200px;
          height: 200px;
          z-index: 15;
          background: red;
        
        .show 
          display: flex;
        
      </style>
      <div id='modalContainer' class="show">
        <div class='modal'>Here is the modal</div>
      </div>    
    `;
  


customElements.define('element-modal', Modal);

【参考方案1】：

您可以简单地添加此 javascript 代码，

window.onload = () => 
setTimeout(() => 
$('#modalContainer').modal(show:true);
, 20000);

【讨论】：

感谢及时回复，但是如何使用litelement实现，

【参考方案2】：

尝试将fadeOut行为放入firstUpdated()回调函数中。

firstUpdated ()
  const s = this.shadowRoot.getElementById('modalContainer').style;
  const delayInMilliseconds = 20000; //20 seconds

  // Your code to be executed after 20 seconds
  setTimeout(function() 
    s.opacity = 1;
    // Fade an element out and then remove it
    (function fade() 
      (s.opacity -= 0.1) < 0 ? (s.display = 'none') : setTimeout(fade, 40);
    )();
  , delayInMilliseconds);