1

html {
  color: #333;
  background-color: #16a085;
}

label {
  cursor: pointer;
  transition: all 250ms;
}

.container {
  position: relative;
  margin: 0 auto;
  padding: 50px;
}
.container h1 {
  font-weight: 100;
  color: white;
  text-align: center;
}
.container .modal-button {
  position: relative;
  display: block;
  margin: 100px auto;
  padding: 20px 25px 34px;
  width: 50px;
  font-size: 36px;
  font-weight: 300;
  color: #2980b9;
  text-align: center;
  line-height: 0.3;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
  transition: all 250ms;
}
.container .modal-button span {
  font-size: 12px;
}
.container .modal-button:hover, .container .modal-button:focus {
  color: #16a085;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.container .modal-content,
.container .modal-background {
  visibility: hidden;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  cursor: pointer;
}
.container .modal-background {
  transition: height 250ms;
}
.container .modal-content {
  transform: scale(0);
  transition: transform 500ms;
}
.container #modal {
  display: none;
}
.container #modal:checked ~ .modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  visibility: visible;
  opacity: 1;
  transition: height 250ms;
}
.container #modal:checked ~ .modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -25%;
  margin-left: -25%;
  width: 50vw;
  height: auto;
  padding: 40px;
  background-color: white;
  border-radius: 3px;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  cursor: auto;
  transform: scale(1);
  transition: transform 500ms;
}
.container #modal:checked ~ .modal-content .modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 22px;
  color: rgba(51, 51, 51, 0.4);
  transition: color 200ms, transform 500ms;
}
.container #modal:checked ~ .modal-content .modal-close:hover, .container #modal:checked ~ .modal-content .modal-close:focus {
  color: #333;
  transform: rotate(360deg);
}
.container #modal:checked ~ .modal-content p {
  position: relative;
  margin: 0 0 20px 0;
  font-weight: 200;
  font-size: 14px;
  line-height: 1.6;
}
.container #modal:checked ~ .modal-content .modal-content-button {
  position: relative;
  float: right;
  margin: 0;
  padding: 10px 20px;
  color: white;
  font-weight: 100;
  border-radius: 3px;
  background-color: #2980b9;
}
.container #modal:checked ~ .modal-content .modal-content-button:hover, .container #modal:checked ~ .modal-content .modal-content-button:focus {
  background-color: #409ad5;
}
<div class="container">
	
	<h1>CSS Only Modal with Animation</h1> 
	
	<input id="modal" type="checkbox">
	<label class="modal-button" for="modal">
		<i class="fa fa-fire" aria-hidden="true"></i>
		<span>Fire Me!</span>
	</label>
	<label class="modal-background" for="modal"></label>

	<div class="modal-content">
		<label class="modal-close" for="modal">&#10005;</label>
		<h2>Sweet Modal</h2>
		<p>111111111111111</p>
		<label class="modal-content-button" for="modal">OK</label>
	</div> <!-- .modal-content -->
</div> <!-- .modal-container -->

<div class="container">
	
	<h1>CSS Only Modal with Animation</h1> 
	
	<input id="modal" type="checkbox">
	<label class="modal-button" for="modal">
		<i class="fa fa-fire" aria-hidden="true"></i>
		<span>Fire Me!</span>
	</label>
	<label class="modal-background" for="modal"></label>

	<div class="modal-content">
		<label class="modal-close" for="modal">&#10005;</label>
		<h2>Sweet Modal</h2>
		<p>22222222</p>
		<label class="modal-content-button" for="modal">OK</label>
	</div> <!-- .modal-content -->
</div> <!-- .modal-container -->

Использую данное всплывающее окно на сайте, возник вопрос - как приделать каждому окну уникальный ИД для того что бы использовать 2 и более окна на 1 странице. Подскажите пожалуйста.

7
  • Всё очень просто, для каждого модельного делаете свой уникальный ид и стили на "открытие\закрытие" его и всё. Или переходите на "модальные окна" написанные с использованием JS\JQ
    – De.Minov
    11 авг 2019 в 15:52
  • @CbIPoK2513 коллега выше подредактировал css код и я понял логику - но при попытке дать уникальный ид у меня во всех окнах выскакивает содержание только 1 где ид не указан. Прошу вас по возможности привести рабочий пример.
    – Nihroms
    11 авг 2019 в 16:07
  • С одной стороны смысл модального окна в том, что вы не можете совершить никаких действий на странице, пока не совершите действие в модальном окне. Например если в JavaScript написать alert(1);, то вы получите модальное окно, и страница заблокируется до тех пор пока вы не нажмёте ОК. С другой стороны fancybox позволяет создать сколько нужно. Прописываете им разный id и общий класс Или вариант вызов модального окна из модального окна sql.ru/forum/1036542/… 11 авг 2019 в 16:10
  • @trollDemiurg я отредактировал код и вставил в пример 2 окно - вот такая ситуация у меня прямо сейчас происходит. Вы можете привести рабочий пример?
    – Nihroms
    11 авг 2019 в 16:17
  • Ребята неужели ничего не придумать?
    – Nihroms
    11 авг 2019 в 16:31

2 ответа 2

4

Использованное вами решение основано на возможности из CSS менять стили для включенного чекбокса. Все кнопки открыть и закрыть просто переключают чекбокс. Два чекбокса -- два модальных окна. Обратите внимание на id у чекбоксов и for у лэйблов.

.modal-content {
  display: none;
  border: 1px solid #000;
  padding: 2em;
}
.modal-controller {
  display: none;
}
.modal-controller:checked ~ .modal-content {
  display: block;
}
<div>
  <input class="modal-controller" id="modal1" type="checkbox">
  <div class="modal-content">
    Первое окно
    <label for="modal1">[закрыть]</label>
  </div>
</div>
<div>
  <input class="modal-controller" id="modal2" type="checkbox">
  <div class="modal-content">
    Второе окно
    <label for="modal2">[закрыть]</label>
  </div>
</div>

<ul>
  <li><label for="modal1">Для первого</label></li>
  <li><label for="modal2">Для второго</label></li>
</ul>

2

html {
  color: #333;
  background-color: #16a085;
}

label {
  cursor: pointer;
  transition: all 250ms;
}

.container {
  position: relative;
  margin: 0 auto;
  padding: 50px;
}
.container h1 {
  font-weight: 100;
  color: white;
  text-align: center;
}
.container .modal-button {
  position: relative;
  display: block;
  margin: 100px auto;
  padding: 20px 25px 34px;
  width: 50px;
  font-size: 36px;
  font-weight: 300;
  color: #2980b9;
  text-align: center;
  line-height: 0.3;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
  transition: all 250ms;
}
.container .modal-button span {
  font-size: 12px;
}
.container .modal-button:hover, .container .modal-button:focus {
  color: #16a085;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.container .modal-content,
.container .modal-background {
  visibility: hidden;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  cursor: pointer;
}
.container .modal-background {
  transition: height 250ms;
}
.container .modal-content {
  transform: scale(0);
  transition: transform 500ms;
}
.container #modal {
  display: none;
}
.container #modal:checked ~ .modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  visibility: visible;
  opacity: 1;
  transition: height 250ms;
}
.container #modal:checked ~ .modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -25%;
  margin-left: -25%;
  width: 50vw;
  height: auto;
  padding: 40px;
  background-color: white;
  border-radius: 3px;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  cursor: auto;
  transform: scale(1);
  transition: transform 500ms;
}
.container #modal:checked ~ .modal-content .modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 22px;
  color: rgba(51, 51, 51, 0.4);
  transition: color 200ms, transform 500ms;
}
.container #modal:checked ~ .modal-content .modal-close:hover, .container #modal:checked ~ .modal-content .modal-close:focus {
  color: #333;
  transform: rotate(360deg);
}
.container #modal:checked ~ .modal-content p {
  position: relative;
  margin: 0 0 20px 0;
  font-weight: 200;
  font-size: 14px;
  line-height: 1.6;
}
.container #modal:checked ~ .modal-content .modal-content-button {
  position: relative;
  float: right;
  margin: 0;
  padding: 10px 20px;
  color: white;
  font-weight: 100;
  border-radius: 3px;
  background-color: #2980b9;
}
.container #modal:checked ~ .modal-content .modal-content-button:hover, .container #modal:checked ~ .modal-content .modal-content-button:focus {
  background-color: #409ad5;
}


label {
  cursor: pointer;
  transition: all 250ms;
}

.container1 {
  position: relative;
  margin: 0 auto;
  padding: 50px;
}
.container1 h1 {
  font-weight: 100;
  color: white;
  text-align: center;
}
.container1 .modal-button1 {
  position: relative;
  display: block;
  margin: 100px auto;
  padding: 20px 25px 34px;
  width: 50px;
  font-size: 36px;
  font-weight: 300;
  color: #2980b9;
  text-align: center;
  line-height: 0.3;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
  transition: all 250ms;
}
.container1 .modal-button1 span {
  font-size: 12px;
}
.container1 .modal-button1:hover, .container .modal-button1:focus {
  color: #16a085;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.container1 .modal-content1,
.container1 .modal-background1 {
  visibility: hidden;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  cursor: pointer;
}
.container1 .modal-background1 {
  transition: height 250ms;
}
.container1 .modal-content1 {
  transform: scale(0);
  transition: transform 500ms;
}
.container1 #modal1 {
  display: none;
}
.container1 #modal1:checked ~ .modal-background1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  visibility: visible;
  opacity: 1;
  transition: height 250ms;
}
.container1 #modal1:checked ~ .modal-content1 {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -25%;
  margin-left: -25%;
  width: 50vw;
  height: auto;
  padding: 40px;
  background-color: white;
  border-radius: 3px;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  cursor: auto;
  transform: scale(1);
  transition: transform 500ms;
}
.container1 #modal1:checked ~ .modal-content1 .modal-close1 {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 22px;
  color: rgba(51, 51, 51, 0.4);
  transition: color 200ms, transform 500ms;
}
.container1 #modal1:checked ~ .modal-content1 .modal-close1:hover, .container1 #modal1:checked ~ .modal-content1 .modal-close1:focus {
  color: #333;
  transform: rotate(360deg);
}
.container1 #modal1:checked ~ .modal-content1 p {
  position: relative;
  margin: 0 0 20px 0;
  font-weight: 200;
  font-size: 14px;
  line-height: 1.6;
}
.container1 #modal1:checked ~ .modal-content1 .modal-content-button1 {
  position: relative;
  float: right;
  margin: 0;
  padding: 10px 20px;
  color: white;
  font-weight: 100;
  border-radius: 3px;
  background-color: #2980b9;
}
.container #modal1:checked ~ .modal-content1 .modal-content-button1:hover, .container1 #modal1:checked ~ .modal-content1 .modal-content-button1:focus {
  background-color: #409ad5;
}
<div class="container">
	
	<h1>CSS Only Modal with Animation</h1> 
	
	<input id="modal" type="checkbox">
	<label class="modal-button" for="modal">
		<i class="fa fa-fire" aria-hidden="true"></i>
		<span>Fire Me!</span>
	</label>
	<label class="modal-background" for="modal"></label>

	<div class="modal-content">
		<label class="modal-close" for="modal">&#10005;</label>
		<h2>Sweet Modal</h2>
		<p>111111111111111</p>
		<label class="modal-content-button" for="modal">OK</label>
	</div> <!-- .modal-content -->
</div> <!-- .modal-container -->

<div class="container1">
	
	<h1>CSS Only Modal with Animation</h1> 
	
	<input id="modal1" type="checkbox">
	<label class="modal-button1" for="modal1">
		<i class="fa fa-fire" aria-hidden="true"></i>
		<span>Fire Me!</span>
	</label>
	<label class="modal-background1" for="modal1"></label>

	<div class="modal-content1">
		<label class="modal-close1" for="modal1">&#10005;</label>
		<h2>Sweet Modal</h2>
		<p>22222222</p>
		<label class="modal-content-button1" for="modal1">OK</label>
	</div> <!-- .modal-content -->
</div> <!-- .modal-container -->

Вы сами все написали, просто размножить на два окна, но это костыльно. Есть же facybox, зачем городить огород? @ЕгорБанин прав, дело в id и в разных классах

Ваш ответ

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

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