javascript

Question

我正在尝试在关闭它时创建模式，它将 resolved/return 一个真实值以使计时器继续并删除元素，如果它不是 return false/reject，我根本不知道怎么写。我觉得我可以通过 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)
                
        })
    }

Answer 1

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

来自您的 Open(issue) 函数：

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

然后在你的 MODAL class:

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.
    }
 });
}

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

Answer 2

open(issue)函数：

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

MODAL class:

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)
            }
        });
    })
}

javascript - 模态 return 关闭时的值

javascript - modal return value when close

html

css

class

modal-dialog