When parent is clicked hide div but when the child, then not-CodePudding

I want to achieve something like this, a full w & h container with a mini modal inside for auth, so when I click outside the modal and at the parent container, the class is to be hidden or something, but when to click on modal that to not happen.

<main>
  <section>
    {content}
  </section>
</main>

So somehow it will look like this:

|------------------------------|
| container                    |
|                              |
|      modal                   |
|      |---------------|       |
|      |               |       |
|      |               |       |
|      |               |       |
|      |               |       |
|      |               |       |
|      |---------------|       |
|                              |
|                              |
|------------------------------|

Whenever I click on the container the modal with parent container should be hidden, but when I click the modal this shouldn't happen.

CodePudding user response：

This cant be done with CSS only, you also need Javascript.

In this example I used Jquery to toggle the active class and check which element is being clicked. If we click outside the modal it will be toggled.

$('button').click(function() {
  $('.modal').toggleClass('active');
});

$('body').click(function(e) {
  if (!$(e.target).is('.modal') && !$(e.target).is('.button')) {
    $('.modal').removeClass('active');
  }
});

.modal {
  display: none;
  background-color: lightcoral;
  padding: 10px;
  width: 200px;
  height: 200px;
  margin: auto;
  border: 1px solid black;
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button class="button">Toggle modal</button>
<div class="modal">
  Hello 
</div>

CodePudding user response：

You can show/hide div by setting the value for element.style.display using Javascript.

One way to achieve your scenario would be to check the value of event.target and compare it with modal and main,

show the div if the click is happening inside the modal - by setting the value to flex or block, etc. based on your scenario.
and hide it if it is happening outside the modal, but within the main block - by setting the value to none.

window.onclick = function(event) {
  if (event.target == modal) {
    document.getElementById('main').style.display = 'flex'; // Show
  } else if (event.target == main) {
    document.getElementById('main').style.display = 'none'; // Hide
  }
}

.main {
  height: 100px;
  width: 100px;
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
}

.modal {
  height: 50px;
  width: 50px;
  border: 1px solid black;
}

<div id="main" class="main" >
  <div id="modal" class="modal" >
  </div>
</div>

Note: I am not sure which block you wanted to hide. Here, I am just hiding the entire main div. If you want to hide some other div, then, in the javascript, in getElementById method, you can pass the appropriate id.

CodePudding user response：

Here is the pure CSS solution using the checkbox input trick.

You simply need to play with the label and input[type=checkbox] elements and their :checked state.

You can see I placed another label element behind the modal, that will trigger closing the opened overlay upon click.

https://jsfiddle.net/9s2fwtze/2/

<input id="toggleLogin" type="checkbox" />
<main>
  <section>
    Content
    <button>
      <label for="toggleLogin">
          Login
      </label>
    </button>
  </section>
</main>
<div id="login">
  <label for="toggleLogin"></label>
  <form>
    I'll be the login form.
  </form>
</div>

input {
  display: none;
}

#login {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
}

#login label {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
}

#login form {
  position: relative;
  background: #fff;
  padding: 30px;
}

#toggleLogin:checked ~ #login {
  display: flex;
}

CodePudding user response：

If you insert an input element of type clickbox, with opacity 0 so it can't be seen (but it is still there) then you can make the modal display: none when input:checked using just CSS.

Note both the modal and input are positioned absolute.

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  background-color: cyan;
  position: relative;
}

.input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.input .modal {
  display: block;
}

.modal {
  width: 50%;
  height: 50%;
  margin: 10vmin;
  background-color: lime;
  position: absolute;
}

.input:checked .modal {
  display: none;
}

<div class="container">container
  <input class="input" type="checkbox">
  <div class="modal">modal</div>
</div>

The click acts as a toggle - first click removes the modal, next click shows it again etc.