How to make a div appear when the button is clicked, and when clicked outside it, it closes?

  • 0
    There is a button, so that when you click on it, a dropdown appears, which is invisible by default, and when you click outside an open dropdown, so that this dropdown closes. And when you click on the dropdown itself and its children, so that it does not close. This is a form, if the entered values ​​are saved - even better.

    Tell me the working method that works for you, otherwise I'm trying different things, it works partially (toggle works, the transparency changes, but it does not close when you click outside the dropdown, it becomes visible when you click on the invisible element itself, and not on the button). Or you can open it like this - close it just once. Or that because of the large nesting.
    JavaScript Adalaide McFarland, May 8, 2020

  • 1 Answers
  • 0
    Usually, if you want to add a thing, you need to fully understand its logic of work in order to describe it in the code. That is, if you can describe all the functionality using algorithm , it makes sense to write this yourself. Otherwise, it is better to use a ready-made solution like Dropdowns or Modals from Bootstrap, because it will save time and provide some reliability by using additional resources (you need to load CSS - and bootstrap JS files).



    Self-understanding usually comes with experience. That is, for example, if I want to write a modal, I first have to understand what this modal of mine is and how it should behave in different situations. In fact, this is some kind of element that is displayed in the foreground and blocks everything else. That is, I need to create one full-screen element (1) that will block everything else, and then put another element (2) in it, which will display the content I want. When I click on element 1, I need to hide both elements, freeing up whatever is in the background. That said, if I click inside element 2, nothing should happen. Next, I need to show items 1 and 2 after a certain event, for example, if I click on the button (3).



    Here is the simplest code that works like an AK-47 (also available on JsFiddle for testing):



    HTML

    <span id="element-3">Open modal</span>
    <div id="element-1">
    <div id="element-2">
    Modal content
    </div>
    </div>




    CSS:

    body {  
    width: 100vw;
    height: 100vh;
    background-color: green;
    margin: 0;
    padding: 0;
    }

    #element-3 {
    border: 1px solid black;
    background-color: white;
    }

    #element-1 {
    display: none;
    position: fixed;
    background-color: blue;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    }

    #element-1.show {
    display: block;
    }

    #element-2 {
    background-color: red;
    width: 50vw;
    height: 50vh;
    margin: 0 auto;
    }




    JS

    var element1 = document.getElementById('element-1');
    var element2 = document.getElementById('element-2');
    var element3 = document.getElementById('element-3');

    element3.onclick = function() {
    element1.classList.add('show');
    };

    element1.onclick = function(event) {
    if (event.target !== event.currentTarget) {
    return;
    }
    element1.classList.remove('show');
    };




    After you have made a stable working functionality, you can start developing it. For example, you need to make element 1 transparent. Or you need to make it and element2 appear / disappear using animation, and not instantly. Or you need to get rid of those red-blue-green colors and display rounded corners on element 2 and center it vertically. These are tasks of a different level, which are solved by other methods, which can also be divided into subtasks and solved so that they do not break the tasks of a higher level. In this case, everything will always work reliably and predictably.



    I haven't seen your code, so I can't help you. There can be many reasons why glitches occur, and you need to be a telepathic to guess what exactly is going on in your code implementation. But I have seen many examples where people did something without fully understanding the logic of the phenomenon they were developing. (For example, a modal dialog, or a gallery, or a button. Or a spaceship.) Because of this, their code turns into a tangled tangle that glitches in the most unexpected moments.
    Ivy Cabrera

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!