Вопрос новичка по popap-ам
Всем хорошего дня!
У меня возникла некоторая проблемка:( Скажу сразу, в Java не силен совсем, немного программирую на Питоне, поэтому скорее всего вопрос мой будет глупым) Собственно суть: пытаюсь сделать несколько кнопок на сайте, по клику на которые открывается форма обратной связи в попапе. Нашел скрипт в интернете, использовал на всех страницах, работало нормально, форма по клику открывается - в форме все обрабатывается, письмо идет. Но, когда попытался сделать 2-3 кнопки на одной странице - появилась проблема. При нажатии на 1ю кнопку скрипт нормально работает, как нужно. При нажатии на 2ю кнопку и более, скрипт на долю секунды открывает попап с форомой и перезагружает страницу. Пробовал и delay и функции с задержкой - не помогает. Скрипт простой: <script> $('.open_popup').click(function() { var popup_id = $('#' + $(this).attr("rel")); $(popup_id).show(); $('.overlay2').show(); }) $('.popup .close, .overlay2').click(function() { $('.overlay2, .popup').hide(); }) </script> Вот, собственно вызов его <div align="center"> <span class="open_popup" rel="popup1"> <button class="knopka" value="Отправить заявку"> Отправить заявку </button> </span> </div> <div class="overlay2"></div> <div class="popup" id="popup1"> <span class="close">X</span> ФОРМА </div> </div> Последующие кнопки имеют похожий код вызова, только popup2 и тд, но долю секунды они открывают нужную форму Кто-нибудь может подсказать, как сделать так, что бы при нажатии 2й кнопки и 3й происходило тоже, что и в первом случае, то есть, не было перезагрузки страницы) |
bstpan,
перезагрузка будет в том случае если клик идёт по ссылке и нет event.preventDefault(); html допишите для примера |
event.preventDefault(); не помог (
С первой то все нормально, кликаю, заполняю форму, нажимаю отправить и сообщение идет Кликаю по по второму button, код аналогичный, открывается на долю секунды форма и перезагрузка страницы <div align="center"><br> <span class="open_popup" rel="popup1"> <button class="knopka" value="Отправить заявку"> Отправить заявку </button> </span> </div> <div class="overlay2"></div> <div class="popup" id="popup1"> <span class="close">X</span> <form action="" class="contact-form" name="contact-form" method="post" > <div class="col-sm-4 col-sm-offset-1"> <div class="form-group"> <p align="left"><font color="green"> Тема: </font> </p> <input id="id_subject" type="text" name="subject" maxlength="100" /> </div> <div class="form-group"> <font color="green"> <p align="left">E-mail: </font></p> <input type="text" name="email" id="id_email" /> </div> <div class="form-group"> <p align="left"><font color="green"> Cообщение:</font></p> <textarea id="id_message" rows="10" cols="30" name="message"></textarea> </div> <div class="form-group"> <input type="submit" name="submit" class="btn btn-primary btn-lg" required="required" value="Отправить" /> </div> </div> </div> |
bstpan,
форма незакончена, второого button нет ... всё в прятки играем? вариант с двумя кнопками и одной формой <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <style type="text/css"> .popup { display: none; } </style> </head> <body> <script> $(function(){ $('.open_popup').click(function() { var popup_id = $('#' + $(this).attr("rel")); $(popup_id).show(); $('.overlay2').show(); }) $('.popup .close, .overlay2').click(function() { $('.overlay2, .popup').hide(); }) }); </script> <div align="center"><br> <span class="open_popup" rel="popup1"> <button class="knopka" value="Отправить заявку"> Отправить заявку </button> </span> </div> <div class="overlay2"></div> <div class="popup" id="popup1"> <span class="close">X</span> <form action="" class="contact-form" name="contact-form" method="post" > <div class="col-sm-4 col-sm-offset-1"> <div class="form-group"> <p align="left"><font color="green"> Тема: </font> </p> <input id="id_subject" type="text" name="subject" maxlength="100" /> </div> <div class="form-group"> <font color="green"> <p align="left">E-mail: </font></p> <input type="text" name="email" id="id_email" /> </div> <div class="form-group"> <p align="left"><font color="green"> Cообщение:</font></p> <textarea id="id_message" rows="10" cols="30" name="message"></textarea> </div> <div class="form-group"> <input type="submit" name="submit" class="btn btn-primary btn-lg" required="required" value="Отправить" /> </div> </div></form> </div> <div align="center"><br> <span class="open_popup" rel="popup1"> <button class="knopka" value="Отправить заявку"> Отправить заявку </button> </span> </div> </body> </html> |
bstpan,
вариант с 2 кнопками и у каждого своя форма <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <style type="text/css"> .popup { display: none; } </style> </head> <body> <script> $(function(){ $('.open_popup').click(function() { var popup_id = $('#' + $(this).attr("rel")); $(popup_id).show(); $('.overlay2').show(); }) $('.popup .close, .overlay2').click(function() { $('.overlay2, .popup').hide(); }) }); </script> <div align="center"><br> <span class="open_popup" rel="popup1"> <button class="knopka" value="Отправить заявку"> Отправить заявку </button> </span> </div> <div class="overlay2"></div> <div class="popup" id="popup1"> <span class="close">X</span> <form action="" class="contact-form" name="contact-form" method="post" > <div class="col-sm-4 col-sm-offset-1"> <div class="form-group"> <p align="left"><font color="green"> Тема: </font> </p> <input id="id_subject" type="text" name="subject" maxlength="100" /> </div> <div class="form-group"> <font color="green"> <p align="left">E-mail: </font></p> <input type="text" name="email" id="id_email" /> </div> <div class="form-group"> <p align="left"><font color="green"> Cообщение:</font></p> <textarea id="id_message" rows="10" cols="30" name="message"></textarea> </div> <div class="form-group"> <input type="submit" name="submit" class="btn btn-primary btn-lg" required="required" value="Отправить" /> </div> </div></form> </div> <div align="center"><br> <span class="open_popup" rel="popup2"> <button class="knopka" value="Отправить заявку"> Отправить заявку </button> </span> </div> <div class="popup" id="popup2"> <span class="close">X</span> это вторая форма <form action="" class="contact-form" name="contact-form" method="post" > <div class="col-sm-4 col-sm-offset-1"> <div class="form-group"> <p align="left"><font color="green"> Тема: </font> </p> <input id="id_subject" type="text" name="subject" maxlength="100" /> </div> <div class="form-group"> <font color="green"> <p align="left">E-mail: </font></p> <input type="text" name="email" id="id_email" /> </div> <div class="form-group"> <p align="left"><font color="green"> Cообщение:</font></p> <textarea id="id_message" rows="10" cols="30" name="message"></textarea> </div> <div class="form-group"> <input type="submit" name="submit" class="btn btn-primary btn-lg" required="required" value="Отправить" /> </div> </div></form> </div> </body> </html> |
форма незакончена, второого button нет ... всё в прятки играем?
Извините, он просто был аналогичный потому не скинул, виноват. Первый вариант пробовал - при клике по второй происходит перезагрузка, по первой все нормально, при этом при клике по второй до перезагрузки появляется форма на долю секунды. rel="popup2" id="popup2" - тоже самое, но на долю секунды возникает вторая форма Хотя, тут на форуме все нормально. Может у меня проблема не в скрипте тогда. |
Ооо! Все гениальное просто! Спасибо вам большое - я просто не закрыл тег form!
|
Часовой пояс GMT +3, время: 05:30. |