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

【问题标题】：javascript - modal return value when closejavascript - 关闭时的模态返回值
【发布时间】：2021-10-21 08:44:04
【问题描述】：

我正在尝试制作模态，当我关闭它时，它将解析/返回一个真值以使计时器继续并删除元素，如果它不返回假/拒绝，我不知道如何编写它全部。我觉得我可以通过 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)
                
        })
    }

【问题讨论】：

标签： javascript html css class modal-dialog

【解决方案1】：

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

来自您的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.
    }
 });
}

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

【讨论】：

非常感谢，看到它后我想出了如何用 PROMISE 做到这一点，我觉得很愚蠢，这真的很容易
很高兴知道它以您想要的方式通过 Promise 实现了。

【解决方案2】：

open(issue)函数：

    new MODAL().open(content)
    .then(value => {
        console.log(value);
    })
    .catch(value => {
        console.log(value);
    })

MODAL类：

open (content) {
    this.boxContent.appendChild(content);
    return new Promise((resolve, reject) => {
            this.modal_container.addEventListener("click", e => {

            if (!e.target.closest(".modal-box")) {
                this.close();
                reject(false)
            }   

            if (e.target.closest(".submit")) {
                this.close();
                resolve(true)
            }
        });
    })
}

【讨论】：