There are 3 modal windows:

<div id="myModal_1"> ........ </div> <div id="myModal_2"> ........ </div> <div id="myModal_3"> ........ </div>

How to close the previous modal window when opening a new one?

  • And what exactly does not work? - Air
  • you have 3 blocks and these are not modal windows - user33274
  • @MaksimLensky, why can’t they be modal windows? What's the Difference? - Air
  • one
    @Air the difference is that modal windows have a mode that is regulated in js, in this case there is even no css, and such pop-ups are just as easily done on css3 - user33274
  • one
    @Air Then they would ask you to add a question to answer it. And do not hold a discussion about what you do not like. Yours, but your position is not correct. - alexoander

1 answer 1

In no case do not claim the gold medal

on css3

 * { margin: 0; padding: 0; text-decoration: none; } .modal { width: 60vw; height: 50vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 0 100px rgba(0, 0, 0, .2); display: none; } .modal:target { display: block; } .modal a { position: absolute; top: 10px; right: 10px; color: red; font-size: 1.4em; } 
 <div id="m1" class="modal">первое окно <a href="#">x</a></div> <div id="m2" class="modal">второе окно <a href="#">x</a></div> <div id="m3" class="modal">третье окно <a href="#">x</a></div> <a href="#m1">открыть окно1</a> <a href="#m2">открыть окно2</a> <a href="#m3">открыть окно3</a>

on jQuery

 $(".a1").on("click", function() { $("#m1").show(); $(".outer").show(); }); $(".a2").on("click", function() { $("#m2").show(); $(".outer").show(); }); $(".a3").on("click", function() { $("#m3").show(); $(".outer").show(); }); $(".outer").click(function() { $(".modal").hide(); $(this).hide(); }) 
 * { margin: 0; padding: 0; text-decoration: none; } .modal { width: 60vw; height: 50vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 0 100px rgba(0, 0, 0, .2); display: none; z-index: 11; } .modal a { position: absolute; top: 10px; right: 10px; color: red; font-size: 1.4em; } .outer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: none; background: rgba(0, 0, 0, .6); } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="m1" class="modal">окно 1</div> <div id="m2" class="modal">окно 2</div> <div id="m3" class="modal">окно 3</div> <button class="a1">открыть окно 1</button> <button class="a2">открыть окно 2</button> <button class="a3">открыть окно 3</button> <div class="outer"></div>