1

Имеется 3 модальных окна:

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

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

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

Как закрыть предыдущее модальное окно при открытии нового?

16
  • А что именно не получается?
    – Air
    11 июн 2018 в 13:58
  • у вас имеется 3 блока и это не модальные окна
    – user33274
    11 июн 2018 в 14:03
  • @МаксимЛенский, а почему они не могут быть модальными окнами? в чем отличие?
    – Air
    11 июн 2018 в 14:04
  • 1
    @Air отличие в том что модальные окна имеют режим который регулируется в js , в этом случае даже даже css нету, а подобные всплывашки так же легко делаются на css3
    – user33274
    11 июн 2018 в 14:06
  • 1
    @Air Тогда попросили бы дополнить вопрос, чтобы на него ответить. А не устраивать дискуссию по поводу того, что вам не нравится. С уважением, но ваша позиция не является правильной.
    – alexoander
    11 июн 2018 в 14:23

1 ответ 1

3

Ни в коем случае не претендую на золотую медаль

на 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>

на 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.