如何动态显示多个弹出窗口之一？

问题描述

所以我有一些字段和一个按钮。我要做的是根据您在其前面的字段中输入的内容，使“提交”按钮显示特定的弹出消息。

我在代码的JS字段中有一个示例函数（已注释掉），尽管我不确定这是否足以使其工作。

如何使我的提交按钮显示我已设置的特定消息之一？

这是到目前为止我得到的：

const openModalButtons = document.querySelectorAll('[data-modal-target]');
const closeModalButtons = document.querySelectorAll('[data-close-button]');
const overlay = document.getElementById('overlay');

//function showMeAMessage() {
//    const field1 = document.getElementById("condition1").value;
//    const field2 = document.getElementById("condition2").value;
//
//    submitButton.addEventListener('click',() => {
//    if ( field1 === "yes" && field2 === "hell yes") {
//        display "yes" message
//    } else if ( field1 === "no" && field2 === "wtf" ) {
//        display "no" message
//    } else {
//        display an error message 
//    })
//    
//}


//--------------- "NO" MESSAGE --------------------//

openModalButtons.forEach(button => {
    button.addEventListener('click',() => {
        const modal = document.querySelector(button.dataset.modalTarget)
        openModal(modal);
    })
})
closeModalButtons.forEach(button => {
    button.addEventListener('click',() => {
        const modal = button.closest('.modal');
        closeModal(modal);
    })
})

overlay.addEventListener('click',() => {
    const modals = document.querySelectorAll('.modalNo.active');
    modals.forEach(modalNo => {
        closeModal(modalNo);
    })
})

function openModal(modalNo) {
    if (modalNo == null) return
    modalNo.classList.add('active');
    overlay.classList.add('active');
}
function closeModal(modalNo) {
    if (modalNo == null) return
    modalNo.classList.remove('active');
    overlay.classList.remove('active');
}


//------------- "YES" MESSAGE ---------------------//

openModalButtons.forEach(button => {
    button.addEventListener('click',() => {
    const modals = document.querySelectorAll('.modalYes.active');
    modals.forEach(modalYes => {
        closeModal(modalYes);
    })
})

function openModal(modalYes) {
    if (modalYes == null) return
    modalYes.classList.add('active');
    overlay.classList.add('active');
}

function closeModal(modalYes) {
    if (modalYes == null) return
    modalYes.classList.remove('active');
    overlay.classList.remove('active');
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    transition: 300ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 1000;
    background: #FFF;
    width: 500px; 
    max-width: 80%; 
}

.modal.active {
    transform: translate(-50%,-50%) scale(1);
}

.modal-header-no,.modal-header-yes {
    padding: 0 15px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid black;
    background: #ee3f20;
    color: #FFF;
}

.modal-header-yes {
    background: #43ce61 !important;
}
    
#overlay.active {
    pointer-events: all;
    opacity: 1;
}

<input id="condition1" placeholder="condition 1 here">
<input id="condition2" placeholder="condition 2 here">

<button data-modal-target="#modalYes" id="submitButton">Submit</button>
                    <div class="modal" id="modalNo">
                        <div class="modal-header-no">
                            <div class="title">
                                <h2>No.</h2>
                            </div>
                            <button data-close-button id="modal-close-button">&times;</button>
                        </div>
                        <div class="modal-body" id="noMessage">
                            No.
                            <br>
                            <br>
                            Absolutely not.
                        </div>
                    </div>
                    <div class="modal" id="modalYes">
                        <div class="modal-header-yes">
                            <div class="title">
                                <h2>Yes!</h2>
                            </div>
                            <button data-close-button id="modal-close-button">&times;</button>
                        </div>
                        <div class="modal-body" id="yesMessage">
                             Yes!
                             <br>
                             <br>
                             You are right!
                        </div>
                    </div>
                    <div id="overlay"></div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）