Created
November 17, 2016 11:38
-
-
Save max-kk/03ab1e7379d259ee7b7247a39117ea5a to your computer and use it in GitHub Desktop.
comebacker Modal
https://yadi.sk/i/jKN91QYmyq8iE
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .m1modal-show { | |
| overflow: hidden!important; | |
| position: relative; | |
| right: 8px; | |
| } | |
| .margin-t-b { | |
| margin-top: 10px!important; | |
| margin-bottom: 10px!important; | |
| } | |
| .margin-l { | |
| margin-left: 0!important; | |
| } | |
| .m1loader,.m1modal { | |
| background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAeSURBVHjaYmRgYNBmIAIwMRAJRhVSRyEAAAD//wMAVdAAP0SGoHgAAAAASUVORK5CYII='); | |
| background-repeat: repeat; | |
| width: 100%; | |
| height: 100%; | |
| position: fixed; | |
| display: none; | |
| left: 0; | |
| top: 0; | |
| } | |
| .m1loader { | |
| z-index: 200001; | |
| } | |
| .m1modal { | |
| z-index: 200001; | |
| overflow: auto; | |
| font-family: Arial,Helvetica,sans-serif; | |
| font-size: 14px; | |
| color: #000; | |
| text-align: justify; | |
| margin-left: auto; | |
| margin-right: auto; | |
| background-color: transparent; | |
| } | |
| .m1modal .m1modal-top { | |
| top: 50%; | |
| } | |
| .m1modal .m1modal-left { | |
| left: 50%; | |
| } | |
| .m1modal-block { | |
| position: relative; | |
| width: 600px; | |
| background: #FFF; | |
| box-shadow: 2px 2px 10px rgba(0,0,0,0.35); | |
| border: 1px solid #3a87ad; | |
| } | |
| .m1modal-block .icon-close { | |
| position: absolute; | |
| right: 0; | |
| margin: 15px 20px; | |
| z-index: 1000; | |
| } | |
| .m1modal-block .m1-form-title { | |
| background: #4d83c0; | |
| text-align: center; | |
| line-height: 50px; | |
| text-shadow: 1px 1px 0 #3a87ad; | |
| border-bottom: 1px solid #3a87ad; | |
| padding: 0 100px; | |
| font-size: 18px; | |
| color: #FFF; | |
| width: auto; | |
| height: auto; | |
| margin: 0!important; | |
| letter-spacing: 0; | |
| } | |
| .m1modal.error .m1-form-title { | |
| background: #f00; | |
| text-shadow: 1px 1px 0 #e30000; | |
| border-bottom: 1px solid #e30000; | |
| } | |
| .m1modal.error .m1modal-block { | |
| border: 1px solid #e30000; | |
| } | |
| .m1modal.complete .m1-form-title { | |
| background: #5bb75b; | |
| text-shadow: 1px 1px 0 #50a150; | |
| border-bottom: 1px solid #50a150; | |
| } | |
| .m1modal.complete .m1modal-block { | |
| border: 1px solid #50a150; | |
| } | |
| .icon-close { | |
| background: url('//static.best-gooods.ru/img/icon-close.png') no-repeat; | |
| width: 20px; | |
| height: 19px; | |
| background-position: 0 0; | |
| cursor: pointer; | |
| } | |
| .m1modal p { | |
| font-weight: normal; | |
| width: auto; | |
| } | |
| .m1modal .m1content { | |
| background: #fff repeat; | |
| width: auto; | |
| overflow: hidden; | |
| margin: 0; | |
| box-shadow: none; | |
| } | |
| @media screen and (max-width:540px) { | |
| .m1modal-block { | |
| width: 380px; | |
| } | |
| .m1modal-block .m1-form-title { | |
| padding: 0 50px; | |
| line-height: 39px; | |
| } | |
| } | |
| @media screen and (max-width:405px) { | |
| .m1modal-block { | |
| width: 300px; | |
| } | |
| .m1modal-block .m1-form-title { | |
| padding: 0; | |
| } | |
| } | |
| .m1-form .m1modal-block { | |
| border: 0; | |
| box-shadow: none; | |
| font-family: Arial; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| color: #222; | |
| line-height: 1.5!important; | |
| width: 570px; | |
| } | |
| .m1-form .m1modal-block .m1-form-title { | |
| background: transparent; | |
| text-shadow: none; | |
| color: #222; | |
| font-weight: bold; | |
| font-size: 22px; | |
| border-bottom: 0; | |
| text-transform: none; | |
| } | |
| .m1-form .m1modal-block .icon-close { | |
| margin: 10px 8px; | |
| } | |
| .m1-form .m1modal-block .m1padding { | |
| padding: 20px 40px 40px; | |
| } | |
| .m1-form .m1modal-block p { | |
| font-size: 16px; | |
| text-align: left; | |
| line-height: 1.5; | |
| } | |
| .m1-form .m1modal-block .bold { | |
| font-weight: bold; | |
| } | |
| .m1-form form { | |
| margin: 10px 0; | |
| text-align: center; | |
| width: 100%; | |
| height: auto; | |
| background: 0; | |
| position: static; | |
| padding: 0; | |
| border: 0; | |
| } | |
| .m1-form form input[type=text] { | |
| height: 36px; | |
| line-height: 36px; | |
| color: #222; | |
| border: 1px solid #aaa; | |
| padding: 0 10px; | |
| width: 200px; | |
| display: inline-block; | |
| text-indent: 0; | |
| border-radius: 3px; | |
| background: #fff; | |
| font-size: 14px; | |
| font-style: normal; | |
| box-shadow: none; | |
| position: static; | |
| margin: 0 0 10px 0; | |
| } | |
| .m1-form form ::-webkit-input-placeholder { | |
| color: #888; | |
| } | |
| .m1-form form ::-moz-placeholder { | |
| color: #888; | |
| } | |
| .m1-form form :-moz-placeholder { | |
| color: #888; | |
| } | |
| .m1-form form :-ms-input-placeholder { | |
| color: #888; | |
| } | |
| .m1-form form input { | |
| float: none; | |
| } | |
| .m1-form form input[name=name] { | |
| padding-right: 10px; | |
| } | |
| .m1-form form input[type=submit] { | |
| position: static; | |
| cursor: pointer; | |
| border: 0; | |
| background: #c4191c; | |
| color: #fff; | |
| font-size: 16px; | |
| padding: 0 10px; | |
| color: #FFF; | |
| text-transform: uppercase; | |
| line-height: 38px; | |
| height: 38px; | |
| vertical-align: top; | |
| margin: 0; | |
| display: inline-block; | |
| text-indent: 0; | |
| text-align: center!important; | |
| border-radius: 3px; | |
| font-style: normal; | |
| font-size: 14px; | |
| font-family: Arial,Helvetica,sans-serif; | |
| width: auto; | |
| opacity: 1; | |
| } | |
| .m1-form form input[type=submit]:hover { | |
| background: #dd070b; | |
| text-decoration: none; | |
| } | |
| @import url(https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic); | |
| .m1-form .m1modal-block { | |
| font-family: 'Roboto',sans-serif; | |
| } | |
| .m1-form .m1modal-block { | |
| width: 460px; | |
| border-radius: 5px; | |
| margin: 0 auto; | |
| } | |
| .m1-form .m1modal-block .m1-form-title { | |
| padding: 0; | |
| text-align: center; | |
| line-height: 100px !important; | |
| position: relative; | |
| color: #fff; | |
| text-transform: uppercase; | |
| background: #1c70d8; | |
| font-size: 20px; | |
| font-weight: bold; | |
| letter-spacing: 1px; | |
| } | |
| .m1-form .m1modal-block .m1padding { | |
| padding: 30px; | |
| } | |
| .m1-form .m1modal-block p { | |
| color: rgba(0,0,0,.75); | |
| line-height: 1.5; | |
| font-size: 16px; | |
| } | |
| .m1-form form { | |
| margin: 30px 0; | |
| float: none; | |
| } | |
| .m1-form form * { | |
| box-sizing: border-box; | |
| } | |
| .m1-form form input[type=text] { | |
| border: 2px solid #bdbdbd; | |
| height: 56px; | |
| line-height: 56px; | |
| width: 100%; | |
| padding: 0 15px; | |
| font-size: 20px; | |
| } | |
| .m1-form form input[type=submit] { | |
| width: 100%; | |
| background: #f13650; | |
| height: 80px; | |
| line-height: 80px; | |
| border-radius: 40px; | |
| color: #fff; | |
| font-size: 20px; | |
| letter-spacing: 1px; | |
| font-weight: bold; | |
| margin-top: 10px; | |
| } | |
| .m1-form .m1-form-clock { | |
| line-height: 33px!important; | |
| padding-left: 46px; | |
| background: left center no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAgCAMAAAAynjhNAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB1FBMVEUAAAAccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgccNgAAABYvV2EAAAAmnRSTlMASOTypROmDB19exxQqqhTRc/ClHRebO7LSXzFEJNbDx96YUIWQLWJugUCs/pad9tkPPDZ+P2rBLLVJmrfKNQ1h+EOVtf+OQgqwXNYvulrnOsnhX5vA12KHnLs0bdiKbS5TGfImkpcTYblvGai9ffobsNHixsiJCUguFKXVfMJ9jOvC/T8B7144OYyf4HJRjA4Bg3KLWDYxIg7O/klpgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAHGSURBVCjPdZJnWxNBFIUvgQQ7xSyKYkBKNBEDGNSgAlJCMTYUBdRgRBEVCdYYG1iwNxTr+2ud7C67IWzOh9kz552997nPjEiWClyFha4CyacilIryYrcHPO58tHjNWli3vtgRbtiIqU0lq2BpmcrLN3u1Cs8W2Fopsm17lUV3qMhXLVKzs7auvsEPu2Q3roABg3to3Ku7kKrR1Bxs2Ue4df+BgwaO0HbIcIf15kfapQM6zcpH6eqWbAw90kuzEbUTrZEcTF8/DOjRIMdkFUZiHM8kA5yw5ztp4VNymiGVnOGsjYctzLnzjIiMhvVDpobGLixjX5CL9VJHq01Dl+Ljl9uUOsIkVPUrMsFVi2rqp2uT1zVNi0/duBm8xbR48Vv4dqbozEwymWycHS0JRLgj09y18D1F7z94mEqlHqXV9jFe8dFk937ytCLrFrt4Jp3PqRJHzTH/QgIvqXTGkyReicSJOGM/MbX2vybtRNMsvDGewFsnPMg7/Rt4b5oVGuOD6cZhIpfWwsdlH4NPK+ln1MyWpuBLg739Wp55Tln6poKy4UX397kfi6ElWPqZ0+xXr34f0cz62+cwSctIYpao68/ff3b2H7s/pj40Vyv4AAAAAElFTkSuQmCC'); | |
| } | |
| .m1-form .m1-form-rectangle { | |
| position: absolute; | |
| width: 48px; | |
| height: 24px; | |
| bottom: -12px; | |
| left: 50%; | |
| margin-left: -24px; | |
| background: center bottom no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAD1BMVEUAAAAccNgccNgccNgAAADkVgQwAAAAA3RSTlMAf4C/aSLHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAKVJREFUOMt10dENwyAMRVGHCSp5gUqdwLD/biWEgG3e8ydXRwIssuf6CB41fH61hom2ZgRgoncwAhDRJxgBJ9E3GAGZ6A5GQCTqgxHgicZgBGyiORgBL9EzGAEPURSMgJsoDiY/HKoUHL6CSe23KgRAUsfLCwGA1Pm7hYCD1LXBQkAiGyTiQCAeBBKAIxE4ksAiGSxygElOMAkAgyAwCASdYNCJB38O5XLBE8oM+gAAAABJRU5ErkJggg=='); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var M1 = { | |
| init: function() { | |
| var current = this; | |
| if ( !document.querySelector("#m1-form") ) { | |
| $( '<div id="m1-form" class="m1modal m1-form"><div class="m1modal-block"><div class="icon-close"></div><div class="m1-form-title">Понравилось это предложение?<div class="m1-form-rectangle"></div></div><div class="m1content"><div class="m1padding"><p>Мы расскажем Вам все об этом товаре, предложим наилучшие условия и ознакомим с подходящими акционными предложениями!</p><form method="POST" action="call.php" class="call-form"><input type="text" name="name" value="" placeholder="Ваше имя" /><br/<input type="text" name="phone" value="" placeholder="Ваш номер телефона" /><br/><input type="hidden" name="is_popup" value="1" /><input type="hidden" name="from_recall_button" value="0" /><input type="submit" value="ПЕРЕЗВОНИТЬ МНЕ" /></form><p class="m1-form-clock">Оператор перезвонит Вам через 5-10 минут</p></div></div></div></div>]' ).insertAfter( "body" ); | |
| } | |
| //M1.init(); | |
| $(window).resize(function() { | |
| M1.modalRefresh(); | |
| }); | |
| M1.modalRefresh(); | |
| $(document).on("click", ".m1modal", function(event) { | |
| if (event.target != this) { | |
| return false; | |
| } else { | |
| M1.modalHide($(this).closest(".m1modal")); | |
| } | |
| }).on("click", ".icon-close", function(event) { | |
| if (event.target != this) { | |
| return false; | |
| } else { | |
| M1.modalHide($(this).closest(".m1modal")); | |
| M1.panelQuicklyOrderShow(); | |
| } | |
| }).on("keydown", function(key) { | |
| if (key.keyCode == 27) { | |
| M1.modalHide($(".m1modal:visible:last")); | |
| } | |
| }).on("click", ".m1modal > *", function(event) { | |
| event.stopPropagation(); | |
| return true; | |
| }); | |
| M1.initComebacker(500); | |
| }, | |
| modalHide: function($modal) { | |
| $modal.fadeOut("fast", function() { | |
| if (!$(".m1modal:visible").length) { | |
| $("body").removeClass("m1modal-show"); | |
| } | |
| }); | |
| }, | |
| modalRefresh: function() { | |
| if ($(".m1modal:visible:last").length) { | |
| var modalBlock = $(".m1modal:visible:last .m1modal-block"), | |
| width = parseInt(modalBlock.width()), | |
| height = parseInt(modalBlock.height()); | |
| if ($(window).height() > height + 20) { | |
| modalBlock.addClass("m1modal-top").removeClass("margin-t-b").css("margin-top", -1 * (height / 2)); | |
| } else { | |
| modalBlock.addClass("margin-t-b").removeClass("m1modal-top"); | |
| } | |
| if ($(window).width() > width) { | |
| modalBlock.addClass("m1modal-left").removeClass("margin-l").css("margin-left", -1 * (width / 2)); | |
| } else { | |
| modalBlock.addClass("margin-l").removeClass("m1modal-left"); | |
| } | |
| } | |
| }, | |
| panelQuicklyOrderHide: function() { | |
| var selector = $('#mobile_div'); | |
| if (selector.length > 0) { | |
| selector.hide(); | |
| } | |
| }, | |
| panelQuicklyOrderShow: function() { | |
| var selector = $('#mobile_div'); | |
| if (selector.length > 0) { | |
| selector.show(); | |
| } | |
| }, | |
| modalShow: function($modal) { | |
| $modal.fadeIn("fast"); | |
| $("body").addClass("m1modal-show"); | |
| this.modalRefresh(); | |
| this.panelQuicklyOrderHide(); | |
| }, | |
| initComebacker: function(timeout) { | |
| try { | |
| setTimeout(function start_M1comebacker() { | |
| var comebacker = true; | |
| $(window).on("mouseout", function(event) { | |
| if (event.pageY - $(window).scrollTop() < 1 && comebacker) { | |
| comebacker = false; | |
| var modalWindow = $("#m1-form"); | |
| M1.modalShow(modalWindow); | |
| return false; | |
| } | |
| }); | |
| }, timeout); | |
| } catch (e) {} | |
| }, | |
| validateAndSendForm: function(jsonRequest, M1Text) { | |
| var current = this; | |
| $("#m1-form form").on("submit", function() { | |
| if (jsonRequest) { | |
| current.prepareJsonData($(this)); | |
| } | |
| $("input[name=name]", this).val($.trim($("input[name=name]", this).val())); | |
| if (!$("input[name=name]", this).val()) { | |
| alert(M1Text.validation_name); | |
| return false; | |
| } | |
| var phone_val = $("input[name=phone]", this).val(); | |
| var is_popup = $("input[name=is_popup]", this).val(); | |
| var reg1 = new RegExp("[^0-9]*", "g"), | |
| reg2 = new RegExp("[^0-9-+ ()]", "g"); | |
| var phone_txt = phone_val.replace(reg1, ""); | |
| if (phone_val.search(reg2) != -1) { | |
| alert(M1Text.validation_phone1); | |
| return false; | |
| } | |
| if (!phone_txt || phone_txt.length < 7) { | |
| alert(M1Text.validation_phone2); | |
| return false; | |
| } | |
| current.showComebackerAlert = false; | |
| return true; | |
| }); | |
| }, | |
| prepareJsonData: function(form) { | |
| var datarow = form.serializeArray(); | |
| $(datarow).each(function(item, itemData) { | |
| if (itemData.name == "name" || itemData.name == "phone" || itemData.name == "is_popup") { | |
| delete datarow[item]; | |
| } | |
| }); | |
| }, | |
| showComebackerAlert: true, | |
| initComebackerAlert: function(M1Text) { | |
| var current = this; | |
| window.onbeforeunload = function(evt) { | |
| if (current.showComebackerAlert) { | |
| current.showComebackerAlert = false; | |
| return M1Text.comebacker_text; | |
| } | |
| }; | |
| } | |
| }; | |
| M1.init(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
// Callback click: