时间戳

首页 > 解决方案 > javascript - 关闭时的模态返回值

javascript - javascript - 关闭时的模态返回值

问题描述

我试图在我关闭它时制作模态，它将解析/返回一个真值以使计时器继续并删除元素，如果它不返回假/拒绝，我根本不知道如何编写它。我觉得我可以通过 Promise 解决和拒绝以某种方式做到这一点，但我不知道如何:(。

（要让计时器继续，我需要设置“timer.pause = false”）

 class MODAL{
    constructor(){

        this.modal_container = document.createElement("div")
        this.modal_container.classList.add("modal")
        document.querySelector("body").appendChild(this.modal_container)

        this.overlay = document.createElement("div")
        this.overlay.classList.add("overlay")        
        this.modal_container.appendChild(this.overlay)

        this.content_container = document.createElement("div")
        this.content_container.classList.add("modal-content")        
        this.modal_container.appendChild(this.content_container)

        this.boxContent = document.createElement("div")
        this.boxContent.classList.add("modal-box")
        this.content_container.appendChild(this.boxContent)

        this.events()
    }

    close(){
        this.modal_container.parentNode.removeChild(this.modal_container);
    }    
    
    open(content){
        this.boxContent.appendChild(content);
    }


    // EVENTS
    events(){
        this.closeEvent()
        // need to add more
    }

    closeEvent(){
        this.modal_container.addEventListener("click", e =>{
            if(!e.target.closest(".modal-box")){
                this.close();
            }
        })
    }
}

function Open(issue){
        issue.addEventListener("click", () => {
            let content = document.createElement("div");
            content.classList.add("rows");
            let html = `
            <div>
                <h1 class = "title">TITLE</h1>
            </div>          
            <div>
                <input type = "text" placeholder = "מערכת">
            </div>        
            <div>
                <input type = "text" placeholder = "פורט">
            </div>        
            <div>
                <input type = "text" placeholder = "RIT">
            </div>        
            <div>
                <input type = "text" placeholder = "כמה זמן לקח">
            </div>        
            <div>
                <input type = "time" placeholder = "התחיל מ">
            </div>        
            <div>
                <input type = "time" placeholder = "נגמר ב">
            </div>
            `
            content.innerHTML = html
            timer.pause = true
            new MODAL().open(content) // when close continue timer (timer.pause = false)
                
        })
    }

标签： javascripthtmlcssclassmodal-dialog

解决方案

我认为您可以使用回调。为了给你一些想法，比如：

从你的Open(issue)功能：

// pass the callback here to continue timer
new MODAL().open(content, () => timer.pause = false);

然后在你的MODAL课上：

open (content, callbackFn) {
  this.boxContent.appendChild(content);
  
  // referenced from your closeEvent() function
  this.modal_container.addEventListener("click", e => {
    if (!e.target.closest(".modal-box")) {
      this.close();
      callbackFn(); // trigger the callback function here.
    }
 });
}

让我知道这是否满足您的要求。

推荐阅读