Модальное окно на jQuery⁠⁠

Привет, юные и не очень кодеры!

Сегодня хочу показать вам как делать модальное окно на jQuery! Специально для этого дела я накидал небольшой сайтик по продаже батона)).

Что же умеет делать наша модалочка. При клике на кнопку «Оформить заказ», появляется окошко, с полями для имени и телефона. Если их заполнить и нажать кнопку отправить, то высветиться сообщение о том, что заказ отправлен и ваши данные с формы.

Структура сайта проста:

корне index.html

<!DOCTYPE html>

<html>

<head>

<title>Продам батон</title>

</head>

<body>

<div class="header"><h1>Купить Батон</h1></div>

<h2>Хороший батон</h2>

<p>Текст про батон, текст про батон, текст про батон, текст про батон. Текст про батон, текст про батон, текст про батон, текст про батон.Текст про батон, текст про батон, текст про батон, текст про батон.Текст про батон, текст про батон, текст про батон, текст про батон.Текст про батон, текст про батон, текст про батон, текст про батон.</p>

<button type="button" class="open">СДЕЛАТЬ ЗАКАЗ</button>

</div>

<div class="footer"><p>SLUSAR.SU 2017г.</p></div>

<p><b>ОФОРМЛЕНИЕ ЗАКАЗА</b></p>

<button type="button" class="cansel">ЗАКРЫТЬ</button>

<button type="button" class="send">ОТПРАВИТЬ</button>

</form>

</div>

</div>

</body>

</html>

папка css с файлом main.css

body{

background: #A6D585;

font-size: 18px;

}

button{

height: 32px;

margin: 5px;

color: #fff;

border: none;

}

input{

height: 32px;

margin: 10px;

width: 300px

}

.wrapper{

width: 800px;

margin: 0 auto;

background: #fff;

font-family: 'Lora', serif;

}

.header, .footer{

text-align: center;

height: 50px;

color: #fff;

background: #598F32;

}

.content{

padding: 15px;

text-align: center;

}

.content p{

text-align: justify;

}

.content img{

width: 300px;

}

.modal{

position: absolute;

display: none;

top: 24%;

right: 38%;

width: 320px;

background: #fff;

padding: 10px;

border: 1px solid #ccc;

box-shadow: 0 0 10px rgba(0,0,0,0.5);

}

.footer{

padding: 10px;

}

.modal p{

text-align: center;

}

.open, .send{

background: #598F32;

}

.cansel{

background: #993022;

margin-left: 10px;

}

папка js с файлом main.js (код ниже) и jquery-3.2.1.min.js (скачайте сами)

$(document).ready(function (){

openModal();//вызываем нашу функцию

});

//функция modal

function openModal() {

//Открываем модалку при клике на кнопку Сделать заказ

$(".open").click(function () {

$(".modal").show('fast');//показывает див модалки

});

//закрывает модалку при клике на кнопку Закрыть

$(".cansel").click(function () {

$(".modal").hide('fast');//скрывает див модалки

});

//действия при нажатии на кнопку Отправить

$(".send").click(function () {

//Считываем данные с полей формы

var name = $("input#name:text").val();

var phone = $("input#phone:text").val();

//если они не пустые

if(name !=="" && phone !==""){

var text = "Ваше имя: " +name + "\n" +"Ваш телефон: "+phone;//строка с значениями из формы

alert("Заказ отправлен\n"+text);//выводим информацию о успешном хаказе

$(".modal").hide('fast');//закрываем модалку

}else{

alert("ВОУ! ВОУ! АЛАРМ! ЗАПОЛНИ ВСЕ ПОЛЯ!");//если поля формы пустые, выводи сообщение

}

});

}

папка img с файлом baton.png

Исходники, как всегда, прилагаются.

Скачать Исходники: http://slusar.su/modalnoe-okno-na-jquery/

Правила сообщества