Помогите с popUP окном на jQuery

[IvanRu08]

Всем привет. Необходимо сделать всплывающую форму на jquery. Перепробовал много решений из интернете, ни одно не работает по нормальному.  Вот код формы: 

<div class="popup">   <form action="#" name="popup-form">      <label for="user-name">Имя</label>      <input type="text" id="user-name" name="user-name" required>      <label for="phone-number">Телефон</label>      <input type="text" id="phone-number" name="email" required>      <input type="submit" value="Отправить">   </form></div>

Вот стили для нее: 

.popup{    width: 378px;    height: 240px;    padding: 15px 0 15px 21px;    border: 1px solid #ff7d01;    -webkit-border-radius: 2px;       -moz-border-radius: 2px;            border-radius: 2px;    -khtml-border-radius: 2px;    behavior: url(border-radius.htc);    display: none;}.popup label{    font: 17px 'RobotoRegular';    display: block;    margin: 0 0 5px 0;    color: #2b3d49;}.popup [type='text']{    font-size: 16px;    width: 337px;    height: 45px;    margin: 0 0 18px 0;    padding: 0 10px 0 10px;    border: 1px solid #d4d4d5;    -webkit-border-radius: 2px;       -moz-border-radius: 2px;            border-radius: 2px;    background: #fff;    -khtml-border-radius: 2px;    behavior: url(border-radius.htc);}.popup [type='text']:focus{    border: 1px solid #3b83c0;    outline: none;}.popup [type='submit']{    font: 18px 'RobotoRegular';    width: 194px;    height: 45px;    margin: 5px 0 0 0;    cursor: pointer;    color: #fff;    border: none;    -webkit-border-radius: 2px;       -moz-border-radius: 2px;            border-radius: 2px;    background: #3b83c0;    -khtml-border-radius: 2px;    behavior: url(border-radius.htc);}.popup [type='submit']:hover{    background: #216cab;}

По клику на ссылку "Заказать звонок" в шапке должна показываться эта форма, а при клике в любое место - закрывать. Помогите пожалуйста реализовать это на jQuery. Вот сайт: http://cm04741.tmweb.ru/index.html

Edited August 18, 2015 by IvanRu08

[amelice]

 

2. код нужно обернуть в жквери

Что значит обернуть в jQuery? 

 

Поменяйте код который в script.js на тот, что я выше написала

 

[wwt]

и jquery ui пробовали ? И оно тоже не работает нормально? =)

[rus]

у вас не подключен скрипт: http://cm04741.tmweb.ru/js/script.js

[amelice]

Примерно так

[Crystal-3]

Перепробовал много решений из интернете, ни одно не работает по нормальному

 

Посмотрите этот урок: http://webformyself.com/sozdanie-vsplyvayushhej-formy-podpiski/

[IvanRu08]

у вас не подключен скрипт: http://cm04741.tmweb.ru/js/script.js

Да, знаю. Пока все делается на локальном сервере. В интернет выложил только часть.

и jquery ui пробовали ? И оно тоже не работает нормально? =)

 

А целесообразно использовать jquery UI лишь только для popup? 

Примерно так

Спасибо. Скопировал ваш код, но у меня почему то при нажатии на ссылку "Заказать звонок" страница перезагружается

[wwt]

А целесообразно использовать jquery UI лишь только для popup?

 

Ну существует возможность скомпоновать библиотеку только с тем что вам нужно https://jqueryui.com/download/

но она все равно будет весить довольно много.

 

Вы правы только для попапа тащить целые библиотеки как то не правильно.

 

ЗЫ Я спросил про jquery ui ибо вы написали что в интернете не нашли ничего чтобы работало нормально =)

[IvanRu08]

@wwt, Ну я эту библиотеку изначально не рассматривал как вариант решения) 

[amelice]

 

 

Спасибо. Скопировал ваш код, но у меня почему то при нажатии на ссылку "Заказать звонок" страница перезагружается

По идее не должно, для кнопки был вызван preventDefault(); Выложите код на ваш сайт, чтоб посмотреть, что не так.

[IvanRu08]

@amelice, залил, все равно не работает. Такое ощущение, что jquery не подключился 

Edited August 19, 2015 by IvanRu08

[amelice]

1. нужно добавить в стили класс

.popup.active {  display: block;}

2. код нужно обернуть в жквери

$(function(){    var button = $('.popup-click'),      popup = $('.popup');  button.click( function(e){    e.preventDefault();    if (popup.hasClass('active')) return;    popup.addClass('active');  });  $('body').click( function(e) {      if (!$(e.target).hasClass('popup-click') && !$(e.target).closest(".popup").length && popup.is(':visible'))  {        popup.removeClass('active');      }  });});

[IvanRu08]

2. код нужно обернуть в жквери

Что значит обернуть в jQuery? 

[IvanRu08]

@amelice, Спасибо вам огромное! Все заработало.=) 

[amelice]

@amelice, Спасибо вам огромное! Все заработало.=) 

Пожалуйста

Ну чтоб совсем было хорошо, осталось вам добавить обработчик на закрытие формы, а для этого нужно еще одну строчку кода написать

$(function(){  var button = $('.popup-click'),      popup = $('.popup');  button.click( function(e){    e.preventDefault();    if (popup.hasClass('active')) return;    popup.addClass('active');  });  $('body').click( function(e) {      if (!$(e.target).hasClass('popup-click') && !$(e.target).closest(".popup").length && popup.is(':visible'))  {        popup.removeClass('active');      }  });  $(".popup_close").click(function(){popup.removeClass("active") }); }) 

[IvanRu08]

@amelice, А как сделать, чтобы класс active добавлялся еще к одному элементу? Я создал .overlay и прописал ему следующее:

.overlay {	z-index: 50; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */	position: fixed; /* всегдa перекрывaет весь сaйт */	background-color: #000; /* чернaя */	opacity: 0.8; /* нo немнoгo прoзрaчнa */	width: 100%; 	height: 100%; /* рaзмерoм вo весь экрaн */	top: 0; 	left: 0; /* сверху и слевa 0, oбязaтельные свoйствa! */	cursor: pointer;	display: none; /* в oбычнoм сoстoянии её нет) */} 

Как мне еще и к этом классу добавить active? Пробовал вот так, не работает:

$(function(){    var button = $('.popup-click'),      popup = $('.popup'),      overlay = $('.overlay');  button.click( function(e){    e.preventDefault();    if (popup.hasClass('active')) return;    popup.addClass('active');  });  button.click( function(e){    e.preventDefault();    if (overlay.hasClass('active')) return;    overlay.addClass('active');  });  $('body').click( function(e) {      if (!$(e.target).hasClass('popup-click') && !$(e.target).closest(".popup").length && popup.is(':visible'))  {        popup.removeClass('active');      }      if (!$(e.target).hasClass('popup-click') && !$(e.target).closest(".overlay").length && overlay.is(':visible'))  {        overlay.removeClass('active');      }  });});

Edited August 19, 2015 by IvanRu08

[amelice]

Если хотите оверлей, нужно чуть логику изменить, код немножко упростится. Напишите свой скайп в личку, быстрее будет через скайп.