Opening/Closing blocks one by one?

V

valgerofficial2021-06-08 06:03:10

JavaScript

valgerofficial, 2021-06-08 06:03:10

Good day friends!

There are 3 buttons:

Each of these buttons opens a separate modal. Here is the question, how, when clicking on another button, close the previous modal? Let's say modal #1 is open, when you click on button #2 or #3, close modal #1 or the one that is open #1 #2 #3, etc. Thanks for answers.

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

S

Sergey, 2021-06-08
@sslion

In theory, when you open a modal, you can’t click on another button - that’s why it’s a modal ...

U

undying234, 2021-06-08
@undying234

I may say garbage, but you have all the modals in display: none.
Therefore, when you click on the button, you can force display: none for everyone, and display: block for the desired modal.

R

Rerurk, 2021-06-08
@Rerurk

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="bt1">кнопка 1</button>
<button id="bt2">кнопка 2</button>
<button id="bt3">кнопка 3</button>
<div id="div1" style="width: 100px;height: 100px ;background: red" hidden="hidden">div1</div>
<div id="div2" style="width: 100px;height: 100px ;background: green" hidden="hidden">div2</div>
<div id="div3" style="width: 100px;height: 100px ;background: blue" hidden="hidden">div2</div>

<script>

    function openElement(el) {
   
        if(lastOpenEl){
            lastOpenEl.hidden=true;

        }
        lastOpenEl=el
        el.hidden=false;
    }

    let lastOpenEl;

    let bt1=document.getElementById('bt1')
    let bt2=document.getElementById('bt2')
    let bt3=document.getElementById('bt3')

    let div1=document.getElementById('div1')
    let div2=document.getElementById('div2')
    let div3=document.getElementById('div3')

    bt1.onmousedown=()=>openElement(div1)
    bt2.onmousedown=()=>openElement(div2)
    bt3.onmousedown=()=>openElement(div3)

</script>
</body>
</html>