slick-modal

by Zsanett Tamás

HTML

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Yozz Newsletter form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- Slick modal demo stylesheet -->
    <!--<link rel="stylesheet" type="text/css" href="css/demo_new.css" media="screen" /> oroginal --> 
    <link type="text/css" rel="stylesheet" href="http://test.musorgyartas.com/yozzpopup/css/demo_new.css">
    <!-- Common (don't copy this CSS and jQuery call) -->
    <!--<script type="text/javascript" src="js/jquery.js"></script> original-->
    <script type="text/javascript" src="http://test.musorgyartas.com/yozzpopup/js/jquery.js"></script>


</head>

<body>
    <div id="container">
        <h1>Hi there</h1>
        <h2>Thank you for choosing Slick Modal</h2>
        <p>This page is a simple demo of what you can do with your new Slick Modal.</p>
        <div class="openSlickModal-1 manualLabel">Reopen the popup</div>
    </div>


    <!-- ========== START COPYING HERE ========== -->
    <div id="popup-1" class="slickModal newsletter">
        <div class="slickWindow">
            <!-- Your popup content -->
            <div class="wrap">
                <div class="subtitle">Most a tiéd lehet az</div>
                <div class="title">Ezer forint értékű ajándékutalvány</div>
                <p>Iratkozz fel hírlevelünkre, és megajándékozunk egy 1000 Ft-os ajándékutalvánnyal, melyet bármely termékünkre beválthatsz a következő 4 hétben.</p>
                <form>
                    <input type="text" class="field" placeholder="Név" />
                    <input type="email" class="field" placeholder="Email cím" />
                    <input type="submit" class="closeModal send" value="Kérem a kedvezményt!" />
                </form>
                <label id="close-btn" class="deny closeModal">A megadott adatok kezelése az adatvédelmi nyilatkozatunknak megfelelően történik.</label>
     ...

CSS

/* ---------------------------------------------------------

- document:  Slick Modals - HTML5 and CSS3 powered modal popups
- author:    Capelle @ Codecanyon
- version:   4.4

---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Raleway:200,400,700');
.slickModal * {
    font-family: 'Raleway', sans-serif;
}
.slickModal *{margin:0;padding:0;border:0;outline:0;font-weight:400;font-style:normal;font-size:100%;vertical-align:baseline;line-height:normal;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.slickModal,.slickOverlay,.slickWindow{position:fixed}.slickModal{display:none;z-index:99999}.slickModal.isActive{display:block;z-index:999999}.slickOverlay{top:0;left:0;width:100%;height:100%;content:"";z-index:1}.slickWindow{z-index:2}.slickContent{position:relative}.slickWindow.sm-center{top:0;right:0;bottom:0;left:0}.slickWindow.sm-topLeft{top:0;left:0}.slickWindow.sm-topCenter{top:0;left:0;right:0}.slickWindow.sm-topRight{top:0;right:0}.slickWindow.sm-bottomLeft{bottom:0;left:0}.slickWindow.sm-bottomCenter{bottom:0;left:0;right:0}.slickWindow.sm-bottomRight{bottom:0;right:0}.slickWindow.sm-right{top:0;right:0;bottom:0}.slickWindow.sm-left{top:0;left:0;bottom:0}.slickModal .sm-animated{-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:both;-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;animation-iteration-count:1;animation-timing-function:ease;animation-fill-mode:both;backface-visibility:hidden;transform-style:preserve-3d}.slickModal .sm-animated.sm-fadeOut{-webkit-animation-delay:0s!important;animation-delay:0s!important;pointer-events:none}.slickModal .sm-fadeIn{-webkit-animation-name:sm-fadeIn;animation-name:sm-fadeIn}@-webkit-keyframes sm-fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes sm-fadeIn{0%{opacity:0}100%{opacity:1}}.slickModal...

JavaScript

$(document).ready(function () {
            // Modal 1
            $('#popup-1').slickModals({
                popupType: 'delayed',
                delayTime: 1000,
                setCookie: true,
                cookieDays: 7,
                cookieTriggerClass: 'setCookie-1',
                cookieName: 'slickModal-1',
                cookieScope: 'domain',
                pageAnimationDuration: '0.4',
                pageAnimationEffect: 'scale',
                pageScaleValue: '0.9',
                popupWidth: '560px',
                popupHeight: '300px',
                popupLocation: 'center',
                popupAnimationDuration: '0.6',
                popupAnimationEffect: 'rotateIn',
                popupBoxShadow: '0 0 20px 0 rgba(0,0,0,0.4)',
                popupBackground: "rgba(255,255,255,1)",
                popupMargin: '0',
                popupPadding: '0',
                mobileBreakPoint: '560px',
                mobileLocation: 'bottomCenter',
                mobileWidth: '100%',
                mobileHeight: 'auto',
                mobilePadding: '0',
                reopenClass: 'openSlickModal-1'
            });
        });

        let mouseX = 0;
        let mouseY = 0;
        let popupCounter = 0;

        document.addEventListener("mousemove", function (e) {
            mouseX = e.clientX;
            mouseY = e.clientY;
            document.getElementById("coordinates").innerHTML = "<br />X: " + e.clientX + "px<br />Y: " + e.clientY + "px";
        });

        $(document).mouseleave(function () {
            if (mouseY < 100) {
                if (popupCounter < 1) {
                    showPopup()
                }
                popupCounter++;
            }
        });

        let popupAfterPageLoad = document.getElementById("popup-1");
        let popupCloseButton = document.getElementById("close-btn");

        let COOKIE_STRING = "yozz_popup";

        function hasCookie(cookie_name) {
            let name =...