Hej :)
Krótko - kliknięcie w przycisk otwiera popup (.hover_pop), trzeba wpisać numer telefonu (poprawny), jeśli nie jest poprawny to pokazuje się error, jeśli jest poprawny wyświetla się kolejny popup (hover_pop4). Niestety nie potrafię zrobić, żeby popup wyświetlał się dopiero gdy numer przechodzi walidację.
Proszę o pomoc.
HTML:
<section id="section9">
<div class="send_txt" style="text-align: center;">
<a class="open_pop">ZAMAWIAM</a>
</div>
</section>
<div class="hover_pop" id="hover_pop">
<span class="helper"></span>
<div>
<div class="popupCloseButton">X</div>
<div class="comenda_wrap">
<h3>Wyślij coś tam</h3>
<form id="form" action="" method="post">
<input type="text" id="tel" value="" class="tel required" placeholder="Numer" name="tel" minlength="9" maxlength="9" aria-required="true">
<input id="submit" class="wyslij" name="wyslij" type="submit" value="Wyślij">
</form>
</div>
</div>
</div>
<div class="hover_pop4" id="hover_pop4">
<span class="helper"></span>
<div>
<div class="popupCloseButton">X</div>
<div class="content_pop4">
<p>wysyłka info</p>
<p>chcesz poprawić dane?</p>
<input id="change_tel" class="open_pop change_tel" name="change_tel" type="submit" value="Zmień">
<input id="send_sms" class="open_pop5 send_sms" name="send_sms" type="submit" value="Wyślij">
</div>
</div>
</div>
JS:
$(document).ready(function () {
$("#form").validate({
rules: {
tel: {
required: true,
number: true,
minlength: 9
}
},
messages: {
tel: {
required: "Proszę podać numer telefonu",
minlength: "Proszę podać poprawny numer telefonu",
number: "Proszę podać poprawny numer telefonu"
}
},
});
// first popup
$(".open_pop").click(function(){
$('.hover_pop').show();
});
$('.popupCloseButton').click(function(){
$('.hover_pop').hide();
});
$('.popupCloseButton').click(function(){
$('.hover_pop4').hide();
});
})
CSS:
body {font-family: Helvetica Neue,Helvetica,Arial,sans-serif;}
img{display: block;max-width: 100%;height: auto;}
.send_txt{position: relative;text-align: center;margin-top: 100px;}
#section9 a{color: #000000;font-size: 20px;border: 2px solid #000000;padding: 15px 100px;cursor: pointer;}
.hover_pop, .hover_pop2, .hover_pop3, .hover_pop4, .hover_pop5{background:rgba(0,0,0,.4);display:none;height:100%;position:fixed;
text-align:center;top:0;width:100%;z-index:100000000000000000000;}
.hover_pop .helper, .hover_pop2 .helper, .hover_pop3 .helper, .hover_pop4 .helper, .hover_pop5 .helper{display:inline-block;height:100%;
vertical-align:middle;}
.hover_pop > div, .hover_pop2 > div{background-color: #fff;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 300px;
width: 995px;max-height: 100%;max-width: 100%;overflow-y: auto;text-align: center;padding: 15px 25px;}
.popupCloseButton {cursor: pointer;display: inline-block;line-height: 30px;position: absolute;font-size: 18px;
top: 15px;right: 15px;}
.hover_pop h2, .hover_pop2 h2 {font-weight: 600;font-size: 32px;margin: 35px 0;}
.hover_pop2 h3{margin: 0;padding: 35px 45px;font-size: 32px;font-weight: 600;
position: relative;}
.hover_pop h3{margin: 0;padding: 10px 45px 20px 45px;font-size: 25px;font-weight: 600;position: relative;}
.hover_pop2 h3{border-top: 1px solid #CCC;border-bottom: 1px solid #CCCCCC;}
.hover_pop h3 span, .hover_pop2 h3 span{color: #FF6501;}
.hover_pop .descript, .hover_pop2 .descript {margin: 30px 0 40px;}
.hover_pop .descript .time_free, .hover_pop2 .descript .time_free {font-size: 30px;font-weight: 600;}
/* nowe zmiany dla popup*/
.hover_pop .comenda_wrap{padding-bottom: 6px;}
.error{color: red;display: block;font-size: 13px;padding: 2px 0px 3px 0px;}
.tel{padding: 3px 10px;margin: auto;font-size: 20px;}
.wyslij{color: #ffffff;background-color: #ff5900;border-color: #ff5900;border-style: none;display: block;font-size: 20px; padding: 3px 0px;
margin: 10px auto;width: 234px;}
.wyslij:hover {background-color: #e45000;border-color: #e45000;}
/* popup po weryfikacji numeru */
.hover_pop4 > div{background-color: #fff;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 240px;
width: 560px;max-height: 100%;max-width: 100%;overflow-y: auto;text-align: center;padding: 15px 25px;}
.hover_pop4 p{font-size: 18px;margin: 8px 0px;}
.hover_pop4 .content_pop4{padding: 20px;}
.hover_pop4 p:nth-child(2){padding-bottom: 20px;}
.change_tel, .send_sms{width: 150px;font-size: 20px;height: 50px;margin: 0px 6px;}
.change_tel{color: #ffffff;background-color: #ff5900;border-color: #ff5900;border-style: solid;}
.change_tel:hover {background-color: #e45000;border-color: #e45000;}
.send_sms{color: #ff5900;background-color: #ffffff;border-color: #ff5900;border-style: solid;}
.send_sms:hover {background-color: #e45000;border-color: #e45000;color: #ffffff;}
/* popup trwa wysylanie */
.hover_pop5 > div{background-color: #fff;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 240px;
width: 560px;max-height: 100%;max-width: 100%;overflow-y: auto;text-align: center;padding: 15px 25px;}
.hover_pop5 p{font-size: 18px;display: block;margin: 0px;padding-bottom: 13px;}
.loader_center{text-align: center;display: table-cell;vertical-align: middle;height: 200px;margin: auto;width: 560px;max-width: 100%;}
.loader {border: 16px solid #f3f3f3;border-radius: 50%;border-top: 16px solid #3498db;width: 35px;height: 35px;
-webkit-animation: spin 2s linear infinite; /* Safari */animation: spin 2s linear infinite;display: inline-block;}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }}
