How to make correct js code to close modal window?

A

Anton Volkov2018-12-30 14:36:23

Fonts

Anton Volkov, 2018-12-30 14:36:23

you need to make it so that when you click on a non-modal window, the modal window closes

<!DOCTYPE html>
<html lang="ru">
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<style>
  *{
    
  }
  body{
    margin: 0;
    background: #FFF4F2;
    color:#2E2E2E;
    font-family: Verdana , Arial;
  }
  #modalCont{
    z-index: 5;
    display: none;
    width: 800px;
    height: 600px;
    background: #E8F3EC;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
  }
  #close{
    padding-right: 15px;
    float: right;
    font-size: 600%;
    cursor: pointer;
  }
  #modalTextH1{
    font-family: Microsoft JhengHei Light;
    margin: 30px;
    text-align: center;
    font-size: 350%; 
  }
  #textModal{
    padding-left: 7%;
    padding-right: 6%;
    font-size: 109%;
    word-spacing: 2px;
    line-height: 1.6;
  }
</style>
<body id="body">
  <button id="myBtm">Open</button>
    <div id="modalCont" >
      <span id="close">&times;</span>
      <p id="modalTextH1">Модальне окно</p>
      <p id="textModal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic fugiat iusto aliquid nemo reiciendis, libero id dolor, nisi nobis sapiente error, debitis accusamus impedit repellat eveniet tenetur repellendus adipisci, labore maiores voluptatum delectus dolorum temporibus! Maxime a, aspernatur cupiditate sed minima qui ipsum officiis voluptate distinctio quos nesciunt alias eius eaque laudantium quia iusto quod. Alias veniam officia dolor fugiat fuga autem, commodi doloremque obcaecati quas officiis veritatis dolore possimus molestiae quibusdam voluptate sunt consequuntur delectus! Ipsa harum molestias, molestiae nam libero officiis dignissimos praesentium doloremque nulla distinctio earum est blanditiis ullam nesciunt ipsam, minus, dolorem maiores, voluptates animi veniam id ut. Laudantium reprehenderit vero, veniam fuga nulla aliquam harum laboriosam. Tenetur officia enim vero vitae et eveniet consectetur cum culpa aperiam repellat beatae velit, mollitia, nemo incidunt, quia inventore!</p>
    </div>
</body>
</html>

<script>
  var myBtm = document.getElementById('myBtm');
  myBtm.addEventListener('click' , function () {
    modalCont.style.display = 'block';
  });
  setTimeout(function () {
    modalCont.style.display = 'block';
  }, 800);

  var close = document.getElementById('close');
  close.addEventListener('click' , function () {
    modalCont.style.display = '';
  });

  var modalCont = document.getElementById('modalCont');
  
</script>

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

J

jslby, 2018-12-30
@jslby

You can just make the background fill the entire page. It can be tinted or transparent. And hang on it an action to close the window

A

Anton Volkov, 2018-12-30
@NoName0

Thank you figured it out -
for those who need a solution

<!DOCTYPE html>
<html lang="ru">
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<style>
  *{
    
  }
  body{
    margin: 0;
    background: #FFF4F2;
    color:#2E2E2E;
    font-family: Verdana , Arial;
  }
  #ContainerModBody{
    background: #4800FF;
    width: 100%;
    height: 100vh;
    position: fixed;
    opacity: .15;
    display: none;
  }
  #modalCont{
    z-index: 5;
    display: none;
    width: 800px;
    height: 600px;
    background: #E8F3EC;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
  }
  #close{
    padding-right: 15px;
    float: right;
    font-size: 600%;
    cursor: pointer;
  }
  #modalTextH1{
    font-family: Microsoft JhengHei Light;
    margin: 30px;
    text-align: center;
    font-size: 350%; 
  }
  #textModal{
    padding-left: 7%;
    padding-right: 6%;
    font-size: 109%;
    word-spacing: 2px;
    line-height: 1.6;
  }
</style>
<body>
  <div id="ContainerModBody"></div>
      <div id="modalCont" >
        <span id="close">&times;</span>
        <p id="modalTextH1">Модальне окно</p>
        <p id="textModal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic fugiat iusto aliquid nemo reiciendis, libero id dolor, nisi nobis sapiente error, debitis accusamus impedit repellat eveniet tenetur repellendus adipisci, labore maiores voluptatum delectus dolorum temporibus! Maxime a, aspernatur cupiditate sed minima qui ipsum officiis voluptate distinctio quos nesciunt alias eius eaque laudantium quia iusto quod. Alias veniam officia dolor fugiat fuga autem, commodi doloremque obcaecati quas officiis veritatis dolore possimus molestiae quibusdam voluptate sunt consequuntur delectus! Ipsa harum molestias, molestiae nam libero officiis dignissimos praesentium doloremque nulla distinctio earum est blanditiis ullam nesciunt ipsam, minus, dolorem maiores, voluptates animi veniam id ut. Laudantium reprehenderit vero, veniam fuga nulla aliquam harum laboriosam. Tenetur officia enim vero vitae et eveniet consectetur cum culpa aperiam repellat beatae velit, mollitia, nemo incidunt, quia inventore!</p>
      </div>
    
  <button id="myBtm" style="height: 100px;">Open</button>
    
</body>
</html>

<script>

  var myBtm = document.getElementById('myBtm');
  var modalCont = document.getElementById('modalCont');
  var ContainerModBody = document.getElementById('ContainerModBody');
  var close = document.getElementById('close');

  myBtm.addEventListener('click' , function () {
    modalCont.style.display = 'block';
    ContainerModBody.style.display = 'block';
  });

  setTimeout(function () {
    modalCont.style.display = 'block';
    ContainerModBody.style.display = 'block';
  }, 800);
  
  close.addEventListener('click' , function () {
    modalCont.style.display = '';
    ContainerModBody.style.display = '';
  });

  ContainerModBody.addEventListener('click' , function () {
    ContainerModBody.style.display = '';
    modalCont.style.display = '';
  });
</script>

S

Shillkas11, 2018-12-30
@Shillkas11

This should work. Those. the bottom line is that when you click on the body element, the window closes, and when you click on the modal window, further transmission of the current event to parent elements stops and this event does not reach the body.

var myBtm = document.getElementById('myBtm');
var modalCont = document.getElementById('modalCont');

myBtm.addEventListener('click' , function (event) {
    event.stopPropagation();
    modalCont.style.display = 'block';
  });
  setTimeout(function () {
    modalCont.style.display = 'block';
  }, 800);
var close = document.getElementById('close');
  close.addEventListener('click' , function () {
    modalCont.style.display = '';
  });

modalCont.addEventListener("click", function(event){
event.stopPropagation();
});
document.body.addEventListener("click", function(){
  modalCont.style.display = '';
});