Модальное окно — Библиотека кода

.modal-window {
    position: fixed;
    z-index: 10000;
    width: 100%;
    top: 0;
    left: 0;
    display: none; 
    height: 100%;
    background: rgba(255, 255, 255, 0.50);
}

.modal-windows-form {
    width: 390px;
    height: 360px;
    background-color: white;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 0px 80px;
    box-sizing: border-box;
}

.modal-windows-form h2 {
    width: 100%;
    text-align: center;
    margin: 20px 0px;
    font-size: 22px;
}

.modal-windows-form input[type="text"] {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    background: #e6e7e8;
    color: black;
    padding: 5px 10px;
    font-size: 14px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.modal-windows-form span {
    font-size: 14px;
    text-align: justify;
    margin-left: 10px;
}

.modal-windows-form textarea {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    background: #e6e7e8;
    color: black;
    resize: none;
    height: 90px;
    padding: 5px 10px;
    font-size: 14px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.modal-windows-form input[type="submit"] {
    border: none;
    background: #f9690e;
    color: white;
    width: 160px;
    margin: auto;
    display: block;
    height: 35px;
    margin-top: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 5px;
}

.modal-windows-form input[type="submit"]:hover {
    background: #4ecdc4;
}

.modal-windows-form input[type="checkbox"] {
    display: inline-block;
}

button#form-close {
    border: none;
    outline: none;
    background: transparent;
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    background-size: 10px;
    background-image: url(../img/cross.svg);
}

100

101

102

103

104

105

106

.modal-window {

position: fixed;

z-index: 10000;

width: 100%;

top: 0;

left: 0;

display: none;

height: 100%;

background: rgba(255, 255, 255, 0.50);

}

.modal-windows-form {

width: 390px;

height: 360px;

background-color: white;

box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

padding: 0px 80px;

box-sizing: border-box;

}

.modal-windows-form h2 {

width: 100%;

text-align: center;

margin: 20px 0px;

font-size: 22px;

}

.modal-windows-form input[type="text"] {

width: 100%;

-webkit-box-sizing: border-box;

box-sizing: border-box;

border: none;

background: #e6e7e8;

color: black;

padding: 5px 10px;

font-size: 14px;

margin-bottom: 10px;

border-radius: 5px;

}

.modal-windows-form span {

font-size: 14px;

text-align: justify;

margin-left: 10px;

}

.modal-windows-form textarea {

width: 100%;

-webkit-box-sizing: border-box;

box-sizing: border-box;

border: none;

background: #e6e7e8;

color: black;

resize: none;

height: 90px;

padding: 5px 10px;

font-size: 14px;

margin-bottom: 10px;

border-radius: 5px;

}

.modal-windows-form input[type="submit"] {

border: none;

background: #f9690e;

color: white;

width: 160px;

margin: auto;

display: block;

height: 35px;

margin-top: 20px;

font-size: 16px;

cursor: pointer;

transition: 0.3s;

border-radius: 5px;

}

.modal-windows-form input[type="submit"]:hover {

background: #4ecdc4;

}

.modal-windows-form input[type="checkbox"] {

display: inline-block;

}

button#form-close {

border: none;

outline: none;

background: transparent;

display: block;

width: 10px;

height: 10px;

padding: 0;

margin: 0;

cursor: pointer;

position: absolute;

right: 10px;

top: 10px;

background-size: 10px;

background-image: url(../img/cross.svg);

}

<div class="modal-window">
	<div class="modal-windows-form">
		<button id="form-close"></button> 
		<h2>Оставить заявку</h2> 
		<form>
			<input type="text" name="username" value="" placeholder="Имя"> 
			<input type="text" name="phone" value="" placeholder="Телефон"> 
			<textarea placeholder="Сообщение"></textarea>
			<input type="checkbox" name="personalInfo">
			<span>Я подтверждаю согласие на обработку <a href="#" rel="nofollow" class="super_url">персональных данных</a> </span>
			<input type="submit" name="submit" value="Отправить">
		</form>
	</div>
</div>

<h2>Оставить заявку</h2>

<form>

<span>Я подтверждаю согласие на обработку <a href="#" rel="nofollow" class="super_url">персональных данных</a> </span>

</form>

</div>

  $(document).on('click', '.send-letter', function(){
    $('.modal-window').show();
  });

  $(document).on('click', '#form-close', function(){
    $('.modal-window').hide();
  });

$(document).on('click', '.send-letter', function(){

$('.modal-window').show();

});

$(document).on('click', '#form-close', function(){

$('.modal-window').hide();

});

Добавить комментарий Отменить ответ