Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.01.2016, 19:55
Аватар для alex72bel
Аспирант
Отправить личное сообщение для alex72bel Посмотреть профиль Найти все сообщения от alex72bel
 
Регистрация: 29.12.2012
Сообщений: 60

Как сбросить сценарий кликнув по кнопке?
Доброго времени суток. У меня вот такая ситуация.
Как сделать, чтобы пользователь сайта когда заполнил форму и кликнул по кнопке - "Отправить", отправилось письмо и также, как и нажав на крестик исчезло окно? Сайт находится на хостинге Ucoz/

Вот сама внутренняя часть формы:
<table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">
<tr><td><input type="text" name="f1" size="30" style="width:95%;" maxlength="70" placeholder="E-mail" onfocus="placeholder='';" onblur="placeholder='E-mail';"> </td></tr>
<tr><td><input type="text" name="f2" size="30" style="width:95%;" maxlength="70" placeholder="Ваше имя" onfocus="placeholder='';" onblur="placeholder='Ваше имя';"> </td></tr>
<tr><td><textarea rows="7" name="f3" cols="30" style="width:95%;" placeholder="Что нужно выполнить?" onfocus="placeholder='';" onblur="placeholder='Что нужно выполнить?';"></textarea> </td></tr>
<tr><td colspan="2" align="center"><br /><input type="submit" value="Отправить"></td></tr>
</table>


JS
<script>
window.addEventListener("DOMContentLoaded", function() {
 var d = document.querySelector("#parent_popup"),
 e = document.querySelector(".close");
 e.addEventListener("click", function(a) {
 a.preventDefault();
 d.classList.toggle("show");
 })
 function getCookie(name) {
 var matches = document.cookie.match(new RegExp(
 "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
 ));
 return matches ? decodeURIComponent(matches[1]) : undefined;
}
!getCookie('rem') && window.setTimeout(function() {
 var date = new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000);
 document.cookie = "rem=yes; path=/; expires=" + date.toUTCString();
 d.classList.toggle("show");
 window.setTimeout(function() {
 d.classList.contains("show") && d.classList.toggle("show")
},1800000) //open
},1000) //pause
 });
</script>

HTML
<div id="parent_popup" >
 <div id="popup">
<table cellpadding='10' cellspacing='0' width='100%'>
<tr>
<td colspan="3" align='center' height="35px""><span style="text-align: -webkit-center;font-size:22px;"><strong>Зимнее предложение до 29 февраля 2016 года- <span style="color:#FF8C00;">Скидка 15%</span> на весь ремонт!</strong></span></td>
</tr>
<tr>
<td width='30%'><img src="http://catsitebel.ucoz.com/discount_15.png" alt="ремонт квартир" style="width: 270px;"/></td>
<td align='center' valign='top' width='36%'><span style="text-align: -webkit-center;font-size:18px;">Оставьте заявку на бесплатную консультацию <span style="color:#FF8C00;">прямо сейчас</span> и получите <span style="color:#FF8C00;">Скидку 15%</span> при заказе ремонта!</span><br/><br/><br/><br/><br/><br/><br/>Мы гарантируем что ваши данные не будут переданы третьим лицам</td>
<td align="right" valign='top' width='33%'>$MFORM_1$</td>
</tr>
</table>
<a class="close" title="Закрыть" >X</a>
</div>
</div>

CSS
<style type="text/css">
#parent_popup{background: url([url]http://catsitebel.ucoz.com/vse-ottenki.png[/url]) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;display:none;position:fixed;z-index:99999;top:0;right:0;bottom:0;left:0}
#parent_popup.show{display:block}
#popup{background:#FFF;width:1000px;margin:10% auto;padding:5px 10px 5px 10px;border:3px solid #DDD;position:relative;-webkit-box-shadow:0 0 20px #000;-moz-box-shadow:0 0 20px #000;box-shadow:0 0 20px #000;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px}
.close{background-color:rgba(0,0,0,0.8);border:2px solid #CCC;height:24px;line-height:24px;position:absolute;right:-24px;cursor:pointer;font-weight:bold;text-align:center;text-decoration:none;color:rgba(255,255,255,0.9);font-size:14px;text-shadow:0 -1px rgba(0,0,0,0.9);top:-24px;width:24px;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px;-moz-box-shadow:1px 1px 3px #000;-webkit-box-shadow:1px 1px 3px #000;box-shadow:1px 1px 3px #000}
.close:hover{background-color:rgba(0,122,200,0.8)}
</style>


ДЕМО
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие div блока при первом визите на сайт Nushaba Общие вопросы Javascript 28 20.12.2013 21:24
Как организовать RichEdit arma Элементы интерфейса 2 18.02.2010 14:57
О наследовании событий, или как корректно его отменить. JCShen Events/DOM/Window 8 09.02.2010 00:00
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 23:20
Как вывести переменную из php в сценарий Vitaly jQuery 5 02.07.2009 17:54