@UncleMisha

Как создать много popup на странице?

Обычно я не задают настолько глупые вопросы но что то я зашел в тупичок))) Пользовался я раньше простым попап но тут решил воспользоваться вы*бистым... И вот результат имеем такой html код:
<!-- modal -->
			<div class="modal-overlay">
				<div class="modal">
					<a class="close-modal">
						<svg viewBox="0 0 20 20">
							<path fill="#000000" d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>
						</svg>
					</a><!-- close modal -->
					<div class="modal-content">
						<div class="download_form">
							<form enctype="multipart/form-data" method="post" id="form">
								<h1>Заказать бесплатный звонок</h1>
								<p>заполните форму и мы перезвоним вам в течение 5 мин</p>
								<input type="text" name="name" placeholder="Ваше имя" required><br>
								<input type="text" name="phone" placeholder="Контактный телефон"><br>
								<button type="submit" class="btn btn-success">Заказать бесплатный звонок</button>
							</form>
						</div>
					</div><!-- content -->
				</div><!-- modal -->
			</div><!-- overlay -->

немного стилей:
@media only screen and (min-width: 640px) {
	.modal-overlay {
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
		background-color: rgba(0, 0, 0, 0.6);
		opacity: 0;
		visibility: hidden;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
	}
	.modal-overlay.active {
		opacity: 1;
		visibility: visible;
	}
}
.modal {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0 auto;
	background-color: #fff;
	max-width: 600px;
	height: 400px;
	border-radius: 20px;
	opacity: 0;
	overflow-y: auto;
	visibility: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}
.modal .close-modal {
	position: absolute;
	cursor: pointer;
	top: 5px;
	right: 15px;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
	transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
	transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
	transition-delay: 0.3s;
}
.modal .close-modal svg {
	width: 1.75em;
	height: 1.75em;
}
.modal .modal-content {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1);
	transition-delay: 0.3s;
	border: 0;
}
.modal.active {
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}
.modal.active .modal-content {
	opacity: 1;
}
.modal.active .close-modal {
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	opacity: 1;
}
@media only screen and (max-width: 639px) {
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-overflow-scrolling: touch;
		border-radius: 0;
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
		padding: 0 !important;
	}
	.close-modal {
		right: 20px !important;
	}
}
.download_form {
	text-align: center;
	color: #474747;
}

.download_form h1 {
	font-size: 35px;
}
.download_form input {
	margin: 5px 0;
	width: 300px;
	font-size: 20px;
	padding: 0 8px;
	border: 1px solid #474747;
	border-radius: 5px;
}
.download_form button {
	margin-top: 5px;
	font-size: 20px;
}

и как же без JS:
var elements = $('.modal-overlay, .modal');

$('.open-modal').click(function(){
	elements.addClass('active');
});

$('.close-modal').click(function(){
	elements.removeClass('active');
});

Теперь возникает вопрос: как на странице создать 2 или более разных попапов? В JS "нуб" и пробовал реализовать это вот таким способом:
var elements = $('.modal-overlay, .modal');

$('.open-modal').click(function(){
	elements.addClass('active');
});

$('.close-modal').click(function(){
	elements.removeClass('active');
});
var elements = $('.modal-overlay1, .modal1');

$('.open-modal1').click(function(){
	elements.addClass('active1');
});

$('.close-modal1').click(function(){
	elements.removeClass('active1');
});

Я просто везде добавил цифру 1 в конце классов (да да я понимаю что это тупо) в итоге у меня вообще перестал работать попап. Подскажите пожалуйста как сделать 2 или более попапов на странице? (Контент в popap будет разным)
  • Вопрос задан
  • 201 просмотр
Решения вопроса 1
@UncleMisha Автор вопроса
slo_nik, В общем решил так:
<div id="zvonok" class="modal_div">
				<span class="modal_close"><svg viewBox="0 0 20 20">
					<path fill="#000000" d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>
				</svg></span>
				<!-- тут кoд -->
				<div class="download_form">
					<form enctype="multipart/form-data" method="post" id="form">
						<h1>Заказать бесплатный звонок</h1>
						<p>заполните форму и мы перезвоним вам в течение 5 мин</p>
						<input type="hidden" name="form_subject" value="Клиент заказал бесплатный звонок">
						<input type="text" name="name" placeholder="Ваше имя" required><br>
						<input type="text" name="phone" placeholder="Контактный телефон"><br>
						<button type="submit" class="btn btn-success">Заказать бесплатный звонок</button>
					</form>
				</div>
			</div>
			<div id="overlay"></div>

CSS:
#dovnoload, #zvonok {
	border-radius: 10px;
	background: #fff;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	display: none;
	z-index: 5;
	padding: 20px 30px;
}
#dovnoload .modal_close, #zvonok .modal_close {
	width: 21px;
	height: 21px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	display: block;
}
#overlay {
	z-index:3; 
	position:fixed;
	background-color:#000; 
	opacity:0.8;
	-moz-opacity:0.8; 
	filter:alpha(opacity=80);
	width:100%; 
	height:100%; 
	top:0; 
	left:0;
	cursor:pointer;
	display:none; 
}

JS:
$(document).ready(function() { // зaпускaем скрипт пoсле зaгрузки всех элементoв
    /* зaсунем срaзу все элементы в переменные, чтoбы скрипту не прихoдилoсь их кaждый рaз искaть при кликaх */
    var overlay = $('#overlay'); // пoдлoжкa, дoлжнa быть oднa нa стрaнице
    var open_modal = $('.open_modal'); // все ссылки, кoтoрые будут oткрывaть oкнa
    var close = $('.modal_close, #overlay'); // все, чтo зaкрывaет мoдaльнoе oкнo, т.е. крестик и oверлэй-пoдлoжкa
    var modal = $('.modal_div'); // все скрытые мoдaльные oкнa

     open_modal.click( function(event){ 
         event.preventDefault(); 
         var div = $(this).attr('href'); 
         overlay.fadeIn(400, 
             function(){
                 $(div)
                     .css('display', 'block') 
                     .animate({opacity: 1, top: '50%'}, 200);
         });
     });

     close.click( function(){
            modal 
             .animate({opacity: 0, top: '45%'}, 200, 
                 function(){ 
                     $(this).css('display', 'none');
                     overlay.fadeOut(400); 
                 }
             );
     });
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
irishmann
@irishmann
Научись пользоваться дебаггером
Использовать data-* атрибуты
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы