Кнопка закрытия для моего второго модала не работает, если я открываю Модал в первый раз. Но это работает только после того, как я открою и закрою свой 3-й модальный?

ProgramBox

Кнопка закрытия для моего второго модала не работает, если я открываю Модал в первый раз. Но это работает только после того, как я открою и закрою свой 3-й модальный?

Post author:admin
Запись опубликована:17 января, 2022
Post category:Вопросы по программированию

#javascript #html #css #modal-dialog #close-button

Вопрос:

Я создал 3 режима : 1-й для добавления записи, второй для редактирования записи и третий для удаления записи. Теперь, если я сначала открою модальное удаление, а затем открою модальное изменение, то кнопка закрытия модального изменения будет отлично работать, но если я открою модальное изменение до того, как открою модальное удаление, то его кнопка закрытия не будет работать.

Почему это происходит?

Я делюсь кодом HTML, CSS и JavaScript ниже. Пожалуйста, помогите мне с решением этой проблемы.

HTMl-код

 <!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1">
    <title>Page</title>
    <link rel="stylesheet" type="text/css" href="css/style2.css"> 
</head>

<body>
    <nav>
        <img alt="" src="images/Group 20399.svg" id = "customerSymbol">
        <img alt="" src="images/logo.svg" id = "companyLogo">
    </nav>

    <h3>Invoice List</h3>

    <div id = "gridContainer">
        <div id = "gridPanelHeader">
            <button id="addBtn" class="panelBtn"><img class="panelSymbol" src="images/Path 18189.svg">Add</button>
            <button id="editBtn" class="panelBtn"><img class="panelSymbol" src="images/Path 18191.svg">Edit</button>
            <button id="delBtn" class="panelBtn"><img class='panelSymbol' src="images/Path 18189-1.svg">Delete</button>
            <input id="searchBox" type="text" placeholder="Search for Invoice">
            <img id="searchSymbol" src="images/search-24px (3).svg">
        </div>
        <table id = "invoiceTable">

        </table>
    </div>

    <div id="modal_overlay">
        <div id="modal_addinv" style="top: 30vh;left: 20vw;height: 509px;width: 1106px;">
            <div class="modal_header" style="height: 91px;width: 1106px;">
                <h2 class="modal_heading" style="padding-left: 35px;">Add Invoice <button class="closeBtn"style="left: 44.5vw;top: 1vh;"><img src="images/baseline-close-24px.svg"></button></h2>
            </div>

            <div class="modal_body" style="width: 1106px;height: 225px;">
                <table style="padding-left: 20px;;">
                    <tr>
                        <td><label class="modal_field_name">Customer Name</label></td>
                        <td><input class="modal_textbox" type="text"></td>
                        <td><label class="modal_field_name" style="margin-left: 100px;">Due Date</label></td>
                        <td colspan="2">
                            <input class="modal_textbox" type="date">
                            <img src="images/calendar_today-24px.svg" style="margin-left: -40px;">
                        </td>
                    </tr>
                    <tr>
                        <td><label class="modal_field_name">Customer No.</label></td>
                        <td><input class="modal_textbox" type="text"></td>
                        <td><label class="modal_field_name" style="margin-left: 100px;">Notes</label></td>
                        <td rowspan="3"><textarea style="margin-left: 10px;"></textarea></td>
                    </tr>
                    <tr>
                        <td><label class="modal_field_name">Invoice No.</label></td>
                        <td><input class="modal_textbox" type="text"></td>
                    </tr>
                    <tr>
                        <td><label class="modal_field_name">Invoice Amount</label></td>
                        <td><input class="modal_textbox" type="text"></td>
                    </tr>                   
                </table>
            </div>
            <div class="modal_footer" style="top: 180px;">
                <button id="modal_clr" style="left: 40vw;">Clear</button>
                <button id="modal_add" style="left: 40vw;">Add</button>
            </div>
        </div>

        <div id="modal_editinv" style="top: 30vh; left:37.5vw; width: 543px;height: 511px;">

            <div class="modal_header" style="height: 91px;  width: 543px;">
                <h2 class="modal_heading" style="padding-left: 35px;">Edit Invoice <button class="closeBtn" style="left: 16vw;top: 1vh;"><img src="images/baseline-close-24px.svg"></button></h2>
            </div>

            <div class="modal_body">                
                <table>
                    <tr>
                        <td><label class="modal_field_name">Invoice Amount</label></td>
                        <td><input class="modal_textbox" type="text"></td>
                    </tr>
                    <tr>
                        <td><label class="modal_field_name" style="margin-left: 100px;">Notes</label></td>
                        <td rowspan="3"><textarea style="margin-left: 10px;"></textarea></td>
                    </tr>
                </table>                
            </div>

            <div class="modal_footer" style="top: 130px; height: 85px;width: 543px;">
                <button id="modal_clr" style="left: 14vw;">Reset</button>
                <button id="modal_add" style="left: 14vw;">Save</button>
            </div>          

        </div>

        <div id="modal_deleteinv" style="top: 30vh; left:37.5vw;width: 611px; height: 342px;">
            <div class="modal_header" style="height: 91px; width: 611px;">
                <h2 class="modal_heading" style="padding-left: 35px;">Delete Record(s)<button class="closeBtn" style="left: 17.5vw;top: 0.5vh;"><img src="images/baseline-close-24px.svg"></button></h2>
            </div>

            <div class="modal_body" style="width: 342px;">
                <p>
                    You will lose your records after this action. We can't recover them once you delete.<br/><br/>
                    Are you sure you want to <span>permanently delete</span> them ?
                </p>
            </div>

            <div class="modal_footer" style="top: 100px; height: 20px; width: 611px;">
                <button id="modal_clr" style="left: 17vw;">Cancel</button>
                <button id="modal_add" style="left: 17vw;">Delete</button>
            </div>
        </div>
        
    </div>

    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

Код CSS

 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300amp;display=swap');

body
{
    background-color:#58687e;
    pointer-events: auto;
}

#companySymbol
{
    position:absolute;
    top: 22px;
    left: 86px;
    width: 233px;
    height: 52px;
    color: #FFFFFF;
}

#companyLogo
{
    position:absolute;
    top: 2vh;
    left: 45vw;
    width: 235px;;
    height: 50px;
    background: transparent 0% 0% no-repeat padding-box;
}

h3
{
    position:absolute;
    top: 10vh;
    left: 3vh;
    width: 141px;
    height: 31px;
    font: normal normal normal 28px/32px Ubuntu;
    letter-spacing: 0px;
    color: #FFFFFF;
}

#gridContainer
{
    position:absolute;
    top: 20vh;
    left: 2.5vh;
    width: 97vw;
    height: 70vh;
    background: #273D49CC 0% 0% no-repeat padding-box;
    border-radius: 10px;
}

#gridPanelHeader
{
    position:absolute;
    background-color:transparent;
    height: 8vh;
    width: 97vw;
}

.panelBtn
{
    position:relative;
    top: 2vh;
    left: 55vw;
    width: 100px;
    height: 45px;
    text-align: center;
    justify-content: center;
    align-items: center;
    font: normal normal normal 18px/21px Ubuntu;
    background-color: transparent;
    color: #FFFFFF;
    border: 1px solid #356680;
    border-radius: 10px;
    margin: 5px;
}

.panelBtn:hover
{
    border: 1px solid #14AFF1;
}

.panelBtn .panelSymbol
{
    margin-right: 10px;
}

#searchBox
{
    position:relative;
    top: 2vh;
    left: 57vw;
    width: 340px;
    height: 45px;
    text-align: left;
    padding-left: 15px;
    font: normal normal normal 18px/21px Ubuntu;
    letter-spacing: 0px;
    color: #97A1A9;
    background: #283A46 0% 0% no-repeat padding-box;
    border: 1px solid #356680;
    border-radius: 10px;
}

#searchBox:hover, #searchBox:focus, #modal_clr:hover, #modal_add
{
    outline: none;
    border: 1px solid #14AFF1;
}

#searchSymbol
{
    position:relative;
    top: 2.7vh;
    left: 54.9vw;
    width: 32px;
    height: 32px;
    opacity: 1;
}

#searchBox:hover, #searchBox:focus
{
    outline: none;
    border: 1px solid #14AFF1;
}

#modal_overlay
{
    position: fixed;
    top: 0vh;
    left: 0vw;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
    color: #FFFFFF;
    display: none;
}

#modal_addinv, #modal_editinv, #modal_deleteinv
{
    position: absolute;
    background-color:#2A3E4C;
    border-radius: 10px;
    opacity: 0;
    pointer-events: auto;
}


.modal_header
{
    position: absolute;
    border-bottom: 1px solid #18232b;
    text-align: left;    
    font: normal normal normal 15px/20px Ubuntu;
}

.closeBtn
{
    position: relative;
    border: none;
    background-color:transparent;
}

.modal_body
{
    position: relative;
    top: 100px;
}

.modal_deleteinv .modal_body
{
    position: relative;
    width: 611px;
    height: fit-content;
}

.modal_footer
{
    position: relative;
    justify-content: right;
    border-top: 1px solid #18232b;
}

.modal_field_name
{
    text-align: left;
    font: normal normal normal 20px/24px Ubuntu;
    letter-spacing: 0.19px;
    opacity: 1;
    align-self: flex-start;
    margin: 10px;
    color: #97A1A9;
}

.modal_textbox
{
    width: 300px;
    height: 45px;
    margin: 10px;
}

textarea
{
    height: 200px;
    width: 300px;
}

.modal_textbox, textarea
{
    text-align: left;
    padding-left: 15px;
    font: normal normal normal 18px/21px Ubuntu;
    letter-spacing: 0px;
    color: #97A1A9;
    background: #283A46 0% 0% no-repeat padding-box;
    border: 1px solid #356680;
    border-radius: 10px;
    opacity: 1;
}

#modal_clr, #modal_add
{
    position: relative;
    margin: 10px;
    top: 1.75vh;
    height: 40px;
    width: 100px;
    text-align: center;
    font: normal normal normal 18px/21px Ubuntu;
    background-color: transparent;
    color: #FFFFFF;
    border: 1px solid #356680;
    border-radius: 10px;
}

#modal_add
{
    background-color: #14AFF1;  
}

p
{
    padding-left: 15px;
    font: normal normal normal 20px/24px Ubuntu;
    text-align: left;
    justify-content: center;
    width: 611px;
}

span
{
    color:rgb(255, 60, 25); font-style: italic;
}

JavaScript Code

 const modal_container = document.getElementById('modal_overlay');
const addBtn = document.getElementById('addBtn');
const editBtn = document.getElementById('editBtn');
const delBtn = document.getElementById('delBtn');
const closeBtn = document.getElementsByClassName('closeBtn');
var current_modal = null;

function openAddModal()
{
    current_modal = document.getElementById('modal_addinv');
    current_modal.style.opacity = '1';
    modal_container.style.display = 'block';
    modal_container.style.pointerEvents = 'auto';
    current_modal.style.pointerEvents = 'auto';    
}

function openEditModal()
{
    current_modal = document.getElementById('modal_editinv');
    console.log("edit modal opened");
    current_modal.style.opacity = '1';
    modal_container.style.display = 'block';
    modal_container.style.pointerEvents = 'auto';
    current_modal.style.pointerEvents = 'auto';
}

function openDelModal()
{
    current_modal = document.getElementById('modal_deleteinv');
    current_modal.style.opacity = '1';
    modal_container.style.display = 'block';
    modal_container.style.pointerEvents = 'auto';
    current_modal.style.pointerEvents = 'auto';
}

function closeModal()
{
    modal_container.style.display = 'none';
    modal_container.style.pointerEvents = 'none';
    current_modal.style.pointerEvents = 'none';
    current_modal.style.opacity = '0';
    console.log("Close Button Pressed");
}

closeBtn[0].addEventListener('click', closeModal);
closeBtn[2].addEventListener('click', closeModal);
closeBtn[1].addEventListener('click', closeModal);


addBtn.addEventListener('click', openAddModal);
editBtn.addEventListener('click', openEditModal);
delBtn.addEventListener('click', openDelModal);

Метки: если я открываю Модал в первый раз. Но это работает только после того, как я открою и закрою свой 3-й модальный?, Кнопка закрытия для моего второго модала не работает

Вопрос:

Вам также может понравиться

как получить сумму всех элементов здесь?

Android studio SDK застрял при загрузке компонентов SDK

FancyBox как в модуле gii