Здравствуйте!
Целую ночь над эти парился, но ничего с этого толком не вышло.
Я хочу чтобы после отправки моей формы, человеку высвечивалось окошко благодарности: "Спасибо! Уже скоро мы вам позвоним"
У меня в форме уже есть такое окошко, но я не знаю как сделать чтобы его вызвать.
Поэтому взял другое у этих добрых людей:
https://arcticlab.ru/arcticmodal/#desc
Но не знаю как все это сложить в кучу чтобы оно работало.
В общих чертах вроде понятно, но постоянно захожу в тупик потому что не понимаю что и куда мне нужно\не нужно вставлять в их библиотеку и куда поставить код на моем сайте???
У них есть вот это:
https://arcticlab.ru/arcticmodal/#docs
Но все же я много чего в этом не понимаю с какой стороны не подхожу.
Вот эти коды, их библиотека и моя форма:
<!-- jQuery -->
<script src="//yandex.st/jquery/1.9.1/jquery.min.js"></script>
<!-- arcticModal -->
<script src="js/arcticmodal/jquery.arcticmodal-0.3.min.js"></script>
<link rel="stylesheet" href="js/arcticmodal/jquery.arcticmodal-0.3.css">
<!-- arcticModal theme -->
<link rel="stylesheet" href="js/arcticmodal/themes/simple.css">
HTML-разметка:
<div style="display: none;">
<div class="box-modal" id="exampleModal">
<div class="box-modal_close arcticmodal-close">закрыть</div>
Пример модального окна
</div>
</div>
javascript
:
$(function(){
$('#exampleModal').arcticmodal();
});
<!--Моя форма-->
<div class="form-block-2 w-form">
<form method="post" class="newsletter-form w-clearfix" name="email-form" data-name="Email Form" action="https://api.formbucket.com/f/buk_7SUIvlhSUPhtTYJVggLF2Pyw" id="email-form" redirect="http://perfect-change-studio.website" data-redirect="http://perfect-change-studio.website">
<input type="text" class="header-email-field w-input" maxlength="256" name="Message" data-name="Message" placeholder=" Ваш номер телефона" id="Message" required=""><input type="submit" value="Отправить" data-wait="Минутку..." class="header-form-submit-button w-button">
</form>
<div class="w-form-done">
<div class="text-block">Спасибо! совсем скоро мы с вами свяжемся...</div>
</div>
<div class="w-form-fail">
<div>Упс! Что то пошло не так...</div>
Библиотека:
/*
arcticModal — jQuery plugin
Version: 0.3
Author: Sergey Predvoditelev (sergey.predvoditelev@gmail.com)
Company: Arctic Laboratory (
http://arcticlab.ru/)
Docs & Examples:
http://arcticlab.ru/arcticmodal/
*/
(function(d){var g={type:"html",content:"",url:"",ajax:{},ajax_requ est:null,closeOnEsc:!0,closeOnOverlayClick:!0,clon e:!1,overlay:{block:void 0,tpl:'<div class="arcticmodal-overlay"></div>',css:{backgroundColor:"#000",opacity:0.6}},co ntainer:{block:void 0,tpl:'<div class="arcticmodal-container"><table class="arcticmodal-container_i"><tr><td class="arcticmodal-container_i2"></td></tr></table></div>'},wrap:void 0,body:void 0,errors:{tpl:'<div class="arcticmodal-error arcticmodal-close"></div>',autoclose_delay:2E3,
ajax_unsuccessful_load:"Error"},openEffect:{type:" fade",speed:400},closeEffect:{type:"fade",speed:40 0},beforeOpen:d.noop,afterOpen:d.noop,beforeClose: d.noop,afterClose:d.noop,afterLoading:d.noop,after LoadingOnShow:d.noop,errorLoading:d.noop},j=0,e=d([]),m={isEventOut:function(a,b){var c=!0;d(a).each(function(){d(b.target).get(0)==d(th is).get(0)&&(c=!1);0==d(b.target).closest("HTML",d (this).get(0)).length&&(c=!1)});return c}},f={getParentEl:function(a){var b=d(a);return b.data("arcticmodal")?b
b=
d(a).closest(".arcticmodal-container").data("arcticmodalParentEl"))?b:!1},tra nsition:function(a,b,c,e){e=void 0==e?d.noop:e;switch(c.type){case "fade":"show"==b?a.fadeIn(c.speed,e):a.fadeOut(c.s peed,e);break;case "none":"show"==b?a.show():a.hide(),e()}},prepare_b ody:function(a,b){d(".arcticmodal-close",a.body).unbind("click.arcticmodal").bind("c lick.arcticmodal",function(){b.arcticmodal("close" );return!1})},init_el:function(a,b){var c=a.data("arcticmodal");if(!c){c=b;j++;c.modalID=j ;c.overlay.block=
d(c.overlay.tpl);c.overlay.block.css(c.overlay.css );c.container.block=d(c.container.tpl);c.body=d(". arcticmodal-container_i2",c.container.block);b.clone?c.body.ht ml(a.clone(!0))
a.before('<div id="arcticmodalReserve'+c.modalID+'" style="display: none" />'),c.body.html(a));f.prepare_body(c,a);c.closeOnO verlayClick&&c.overlay.block.add(c.container.block ).click(function(b){m.isEventOut(d(">*",c.body),b) &&a.arcticmodal("close")});c.container.block.data( "arcticmodalParentEl",a);a.data("arcticmodal", c);
e=d.merge(e,a);d.proxy(h.show,a)();if("html"==c.ty pe)return a;if(void 0!=c.ajax.beforeSend){var k=c.ajax.beforeSend;delete c.ajax.beforeSend}if(void 0!=c.ajax.success){var g=c.ajax.success;delete c.ajax.success}if(void 0!=c.ajax.error){var l=c.ajax.error;delete c.ajax.error}var n=d.extend(!0,{url:c.url,beforeSend:function(){voi d 0==k?c.body.html('<div class="arcticmodal-loading" />'):k(c,a)},success:function(b){a.trigger("afterLo ading");c.afterLoading(c,a,b);void 0==g?c.body.html(b):g(c,a,b);f.prepare_body(c,
a);a.trigger("afterLoadingOnShow");c.afterLoadingO nShow(c,a,b)},error:function(){a.trigger("errorLoa ding");c.errorLoading(c,a);void 0==l?(c.body.html(c.errors.tpl),d(".arcticmodal-error",c.body).html(c.errors.ajax_unsuccessful_loa d),d(".arcticmodal-close",c.body).click(function(){a.arcticmodal("clo se");return!1}),c.errors.autoclose_delay&&setTimeo ut(function(){a.arcticmodal("close")},c.errors.aut oclose_delay)):l(c,a)}},c.ajax);c.ajax_request=d.a jax(n);a.data("arcticmodal",c)}},init:function(a){ a=
d.extend(!0,{},g,a);if(d.isFunction(this))if(void 0==a)d.error("jquery.arcticmodal: Uncorrect parameters");else if(""==a.type)d.error('jquery.arcticmodal: Don\'t set parameter "type"');else switch(a.type){case "html":if(""==a.content){d.error('jquery.arcticmod al: Don\'t set parameter "content"');break}var b=a.content;a.content="";return f.init_el(d(b),a);case "ajax":if(""==a.url){d.error('jquery.arcticmod al: Don\'t set parameter "url"');break}return f.init_el(d("<div />"),a)}else return this.each(function(){f.init_el(d(this),
d.extend(!0,{},a))})}},h={show:function(){var a=f.getParentEl(this);if(!1===a)d.error("jquery.ar cticmodal: Uncorrect call");else{var b=a.data("arcticmodal");b.overlay.block.hide();b.c ontainer.block.hide();d("BODY").append(b.overlay.b lock);d("BODY").append(b.container.block);b.before Open(b,a);a.trigger("beforeOpen");if("hidden"!=b.w rap.css("overflow")){b.wrap.data("arcticmodalOverf low",b.wrap.css("overflow"));var c=b.wrap.outerWidth(!0);b.wrap.css("overflow","hid den");var g=b.wrap.outerWidth(!0);g!=
c&&b.wrap.css("marginRight",g-c+"px")}e.not(a).each(function(){d(this).data("arc ticmodal").overlay.block.hide()});f.transition(b.o verlay.block,"show",1<e.length?{type:"none"}:b.ope nEffect);f.transition(b.container.block,"show",1<e .length?{type:"none"}:b.openEffect,function(){b.af terOpen(b,a);a.trigger("afterOpen")});return a}},close:function(){if(d.isFunction(this))e.each( function(){d(this).arcticmodal("close")});else return this.each(function(){var a=f.getParentEl(this);if(!1===a)d.error("jquery.ar cticmodal: Uncorrect call");
else{var b=a.data("arcticmodal");!1!==b.beforeClose(b,a)&&( a.trigger("beforeClose"),e.not(a).last().each(func tion(){d(this).data("arcticmodal").overlay.block.s how()}),f.transition(b.overlay.block,"hide",1<e.le ngth?{type:"none"}:b.closeEffect),f.transition(b.c ontainer.block,"hide",1<e.length?{type:"none"}:b.c loseEffect,function(){b.afterClose(b,a);a.trigger( "afterClose");b.clone||d("#arcticmodalReserve"+b.m odalID).replaceWith(b.body.find(">*"));b.overlay.b lock.remove();b.container.block.remove();a.data("a rcticmodal",
null);d(".arcticmodal-container").length||(b.wrap.data("arcticmodalOverf low")&&b.wrap.css("overflow",b.wrap.data("arcticmo dalOverflow")),b.wrap.css("marginRight",0))}),"aja x"==b.type&&b.ajax_request.abort(),e=e.not(a))}})} ,setDefault:function(a){d.extend(!0,g,a)}};d(funct ion(){g.wrap=d(document.all&&!document.querySelect or?"html":"body")});d(document).bind("keyup.arctic modal",function(a){var b=e.last();b.length&&b.data("arcticmodal").closeOn Esc&&27===a.keyCode&&b.arcticmodal("close")});d.ar cticmodal=
d.fn.arcticmodal=function(a){if(h[a])return h[a].apply(this,Array.prototype.slice.call(arguments,1 ));if("object"===typeof a||!a)return f.init.apply(this,arguments);d.error("jquery.arcti cmodal: Method "+a+" does not exist")}})(jQuery);
