[text] Exit_popup

Viewer

copydownloadembedprintName: Exit_popup
  1. document.write('<!DOCTYPE html>');
  2. document.write('<html lang="en">');
  3. document.write('    <head>');
  4. document.write('        <meta charset="UTF-8">');
  5. document.write('        <meta http-equiv="X-UA-Compatible" content="IE=edge">');
  6. document.write('        <meta name="viewport" content="width=device-width, initial-scale=1.0">');
  7. document.write('        <title>Exit Popup</title>');
  8. document.write('');
  9. document.write('        <style>');
  10. document.write('            body{');
  11. document.write('                font-family: Verdana, Geneva, Tahoma, sans-serif;');
  12. document.write('            }');
  13. document.write('            h3{');
  14. document.write('                letter-spacing: -1.2px !important;');
  15. document.write('            }');
  16. document.write('            h4{');
  17. document.write('                letter-spacing: 0.51px !important;');
  18. document.write('                font-weight: normal !important;');
  19. document.write('            }');
  20. document.write('            .exit-popup {');
  21. document.write('                    position: fixed;');
  22. document.write('                    width: 800px !important;');
  23. document.write('                    margin: auto;');
  24. document.write('                    z-index: 1;');
  25. document.write('                background: #413f40 !important;');
  26. document.write('                    transform: translateY(60%) scale(0);');
  27. document.write('                    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);');
  28. document.write('                }');
  29. document.write('');
  30. document.write('.exit-popup.visible {');
  31. document.write('    transform: translateY(60%) scale(1);');
  32. document.write('}');
  33. document.write('');
  34. document.write('.newsletter {');
  35. document.write('    width: 800px !important;');
  36. document.write('    max-width: 800px !important;');
  37. document.write('    position: absolute;');
  38. document.write('    top: 10%;');
  39. document.write('    left: 25%;');
  40. document.write('    transform: translate(0%, 10%);');
  41. document.write('    background: #fdd501 !important;');
  42. document.write('    ');
  43. document.write('}');
  44. document.write('');
  45. document.write('/* Popup-specific styles */');
  46. document.write('.newsletter {');
  47. document.write('    background: #FFF;');
  48. document.write('    padding: 10px;');
  49. document.write('    border-radius: 3px;');
  50. document.write('}');
  51. document.write('');
  52. document.write('.close {');
  53. document.write('    position: absolute;');
  54. document.write('    top: 5px;');
  55. document.write('    right: 15px;');
  56. document.write('    cursor: pointer;');
  57. document.write('    font-size: 30px;');
  58. document.write('    font-family: Verdana, Geneva, Tahoma, sans-serif;');
  59. document.write('}');
  60. document.write('.row{');
  61. document.write('    display: flex !important;');
  62. document.write('    flex-direction: row !important;');
  63. document.write('    flex-shrink: 0;');
  64. document.write('    width: 100%;');
  65. document.write('    max-width: 100%;');
  66. document.write('    padding-right: 1.5rem;');
  67. document.write('    padding-left: 1.5rem;');
  68. document.write('    margin-top: 1.5rem;');
  69. document.write('}');
  70. document.write('.col-xl-7{');
  71. document.write('    flex: 0 0 58.33333%;');
  72. document.write('    max-width: 58.33333%;');
  73. document.write('}');
  74. document.write('.col-xl-5{');
  75. document.write('    flex: 0 0 41.66667%;');
  76. document.write('    max-width: 41.66667%;');
  77. document.write('}');
  78. document.write('.text-center{');
  79. document.write('    text-align: center !important;');
  80. document.write('}');
  81. document.write('.d-flex{');
  82. document.write('    display: flex !important;');
  83. document.write('}');
  84. document.write('.justify-content-center{');
  85. document.write('    justify-content: center !important;');
  86. document.write('}');
  87. document.write('.align-items-center{');
  88. document.write('    align-items: center !important;');
  89. document.write('}');
  90. document.write('.gap-10{');
  91. document.write('    gap: 10px');
  92. document.write('}');
  93. document.write('.flex-row{');
  94. document.write('    flex-direction: row !important;');
  95. document.write('}');
  96. document.write('.flex-column{');
  97. document.write('    flex-direction: column !important;');
  98. document.write('}');
  99. document.write('.text-uppercase{');
  100. document.write('    text-transform: uppercase !important;');
  101. document.write('}');
  102. document.write('.mr-10{');
  103. document.write('    margin-right: 10px !important;');
  104. document.write('}');
  105. document.write('.mr-05{');
  106. document.write('    margin-right: 5px !important;');
  107. document.write('}');
  108. document.write('.sale-img{');
  109. document.write('    width: 100% !important;');
  110. document.write('    height: auto !important;');
  111. document.write('}');
  112. document.write('.mt-0{');
  113. document.write('    margin-top: 0 !important;');
  114. document.write('}');
  115. document.write('.mt-10{');
  116. document.write('    margin-top: 10px !important;');
  117. document.write('}');
  118. document.write('.mb-10{');
  119. document.write('    margin-bottom: 10px !important;');
  120. document.write('}');
  121. document.write('.mb-0{');
  122. document.write('    margin-bottom: 0 !important;');
  123. document.write('}');
  124. document.write('.sale-details{');
  125. document.write('    width: 500px !important;');
  126. document.write('    max-width: 500px !important;');
  127. document.write('    height: 100% !important;');
  128. document.write('}');
  129. document.write('.input-group {');
  130. document.write(' margin-bottom: 15px;');
  131. document.write('  position: relative;');
  132. document.write('}');
  133. document.write('');
  134. document.write('.input{');
  135. document.write('    width: 100% !important;');
  136. document.write('    height: 40px !important;');
  137. document.write('    border: 1px solid #cbd5e0;');
  138. document.write('    padding-left: 15px !important;');
  139. document.write('    border-radius: 5px !important;');
  140. document.write('    ');
  141. document.write('');
  142. document.write('');
  143. document.write('');
  144. document.write('    &.input-error {');
  145. document.write('    border: 1px solid red;');
  146. document.write('');
  147. document.write('    &:focus {');
  148. document.write('      border: 1px solid red;');
  149. document.write('    }');
  150. document.write('}');
  151. document.write('}');
  152. document.write('.error-message, #error-message-check {');
  153. document.write('  font-size: .85rem;');
  154. document.write('  color: red;');
  155. document.write('}');
  156. document.write('.icon {');
  157. document.write('  width: 24px;');
  158. document.write('  height: 24px;');
  159. document.write('  position: absolute;');
  160. document.write('  top: 10px;');
  161. document.write('  right: 0px;');
  162. document.write('  pointer-events: none;');
  163. document.write('  z-index: 2;');
  164. document.write('');
  165. document.write('  &.icon-success {');
  166. document.write('    fill: green;');
  167. document.write('  }');
  168. document.write('');
  169. document.write('  &.icon-error {');
  170. document.write('    fill: red;');
  171. document.write('  }');
  172. document.write('}');
  173. document.write('');
  174. document.write('.font-14{');
  175. document.write('    font-size: 14px !important;');
  176. document.write('    font-weight: normal !important;');
  177. document.write('}');
  178. document.write('button{');
  179. document.write('    background: #000 !important;');
  180. document.write('    color: #fff !important;');
  181. document.write('    border: none !important;');
  182. document.write('    border-radius: 5px !important;');
  183. document.write('    width: 105% !important;');
  184. document.write('    height: 40px !important;');
  185. document.write('    margin-top: 10px !important;');
  186. document.write('    margin-bottom: 5px !important;');
  187. document.write('    cursor: pointer;');
  188. document.write('}');
  189. document.write('.text-underline{');
  190. document.write('    text-decoration: underline !important;');
  191. document.write('}');
  192. document.write('.hidden{');
  193. document.write('    display: none;');
  194. document.write('}');
  195. document.write('');
  196. document.write('@media (max-width: 480px){');
  197. document.write('    .newsletter{');
  198. document.write('        max-width: 45% !important;');
  199. document.write('        top: 10% !important;');
  200. document.write('        left: 0 !important;');
  201. document.write('        transform: translate(0, 10%) !important;');
  202. document.write('    }');
  203. document.write('    .row{');
  204. document.write('        padding-left: 0rem;');
  205. document.write('        flex-direction: column !important;');
  206. document.write('        padding-top: 30px;');
  207. document.write('    }');
  208. document.write('    .col-xl-7{');
  209. document.write('        flex: 0 0 100% !important;');
  210. document.write('        max-width: 100% !important;');
  211. document.write('    }');
  212. document.write('    .col-xl-5{');
  213. document.write('        display: none !important;');
  214. document.write('    }');
  215. document.write('    h3{');
  216. document.write('        text-align: center !important;');
  217. document.write('    }');
  218. document.write('    h4{');
  219. document.write('        text-align: center !important;');
  220. document.write('    }');
  221. document.write('    .input{');
  222. document.write('        width: 95% !important;');
  223. document.write('    }');
  224. document.write('    button{');
  225. document.write('        width: 100% !important;');
  226. document.write('    }');
  227. document.write('}');
  228. document.write('        </style>');
  229. document.write('    </head>');
  230. document.write('    <body>');
  231. document.write('        <div class="exit-popup">');
  232. document.write('            <div class="newsletter">');
  233. document.write('                <div class="row">');
  234. document.write('                    <div class="col-xl-7 d-flex align-items-center justify-content-center flex-column">');
  235. document.write('                        ');
  236. document.write('                            <h3 class="text-uppercase mt-0 mb-10">get $10 off when you sign up for</h3>');
  237. document.write('                            <h4 class="text-uppercase  mt-0 mb-10">savings,news,updates and more</h4>');
  238. document.write('                            <form action="#" class="form">');
  239. document.write('                                <div class="input-group mt-10">');
  240. document.write('                                    <input type="text" id="name" placeholder="your name" class="input mt-0 mb-10"  />');
  241. document.write('                                    <span class="error-message"></span>');
  242. document.write('                                    <svg class="icon icon-success hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">');
  243. document.write('                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />');
  244. document.write('                                    </svg>');
  245. document.write('');
  246. document.write('                                    <svg class="icon icon-error hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">');
  247. document.write('                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />');
  248. document.write('                                    </svg>');
  249. document.write('                                </div>');
  250. document.write('                                <div class="input-group"> ');
  251. document.write('                                    <input type="email" id="email" placeholder="email address" class=" input mt-0 mb-10" />');
  252. document.write('                                    <span class="error-message"></span>');
  253. document.write('                                    <svg class="icon icon-success hidden hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">');
  254. document.write('                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />');
  255. document.write('                                    </svg>');
  256. document.write('');
  257. document.write('                                    <svg class="icon icon-error hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">');
  258. document.write('                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />');
  259. document.write('                                    </svg>');
  260. document.write('                                </div>');
  261. document.write('                                ');
  262. document.write('                               <div class="input-group">');
  263. document.write('                                <p class="mr-10  mt-0 mb-10 font-14"><input type="checkbox" id="conditions" class="mr-05">Check this box to receive monthly newsletter.</p>');
  264. document.write('                                <span id="error-message-check"></span>');
  265. document.write('                               </div>');
  266. document.write('                                <button type="submit" class="text-center">Sign Up</button>');
  267. document.write('                            </form>');
  268. document.write('                            ');
  269. document.write('                            <p class="text-underline font-14 mt-0 mb-0">Privacy Policy</p>');
  270. document.write('');
  271. document.write('                        ');
  272. document.write('                    </div>');
  273. document.write('                    <div class="col-xl-5">');
  274. document.write('                        <img src="https://useruploads.visualwebsiteoptimizer.com/useruploads/176372/images/339bf06d957c32e3b61f79b563f229af_offerx500.png" alt="sale_offer_image" class="sale-img"/>');
  275. document.write('                    </div>');
  276. document.write('                </div>');
  277. document.write('                ');
  278. document.write('                ');
  279. document.write('                <span class="close">x</span>');
  280. document.write('            </div>');
  281. document.write('        </div>');
  282. document.write('');
  283. document.write('        ');
  284. document.write('<script>');
  285. document.write('//form-validation');
  286. document.write('    class FormValidator {');
  287. document.write('    constructor(form, fields) {');
  288. document.write('        this.form = form');
  289. document.write('        this.fields = fields');
  290. document.write('    }           ');
  291. document.write('');
  292. document.write('  initialize() {');
  293. document.write('    ');
  294. document.write('    this.validateOnSubmit()');
  295. document.write('  }');
  296. document.write('');
  297. document.write('  validateOnSubmit() {');
  298. document.write('    let self = this;');
  299. document.write('   ');
  300. document.write('');
  301. document.write('    this.form.addEventListener(\'submit\', e => {');
  302. document.write('        e.preventDefault()');
  303. document.write('        self.fields.forEach(field => {');
  304. document.write('        const input = document.querySelector(`#${field}`)');
  305. document.write('        self.validateFields(input)');
  306. document.write('      })');
  307. document.write('    })');
  308. document.write('  }');
  309. document.write('');
  310. document.write('  ');
  311. document.write('');
  312. document.write('  validateFields(field) {');
  313. document.write('');
  314. document.write('   ');
  315. document.write('    if (field.value.trim() === "") {');
  316. document.write('      this.setStatus(field, "Name field can\'t be blank", "error")');
  317. document.write('    } else {');
  318. document.write('      this.setStatus(field, null, "success")');
  319. document.write('    }');
  320. document.write('');
  321. document.write('    ');
  322. document.write('    if (field.type === "email") {');
  323. document.write('      const re = /\\S+@\\S+\\.\\S+/');
  324. document.write('      if (re.test(field.value)) {');
  325. document.write('        this.setStatus(field, null, "success")');
  326. document.write('      } else {');
  327. document.write('        this.setStatus(field, "Please enter valid email address", "error")');
  328. document.write('      }');
  329. document.write('    }');
  330. document.write('    ');
  331. document.write('    if(conditions.checked == false){');
  332. document.write('        let errorCheck = document.getElementById("error-message-check");');
  333. document.write('        errorCheck.innerHTML="This field is required";');
  334. document.write('    }else{');
  335. document.write('        let errorCheck = document.getElementById("error-message-check");');
  336. document.write('        errorCheck.innerHTML="";');
  337. document.write('    }');
  338. document.write('');
  339. document.write('    ');
  340. document.write('}');
  341. document.write('');
  342. document.write('  setStatus(field, message, status) {');
  343. document.write('    const successIcon = field.parentElement.querySelector(\'.icon-success\')');
  344. document.write('    const errorIcon = field.parentElement.querySelector(\'.icon-error\')');
  345. document.write('    const errorMessage = field.parentElement.querySelector(\'.error-message\')');
  346. document.write('');
  347. document.write('    if (status === "success") {');
  348. document.write('      if (errorIcon) { errorIcon.classList.add(\'hidden\') }');
  349. document.write('      if (errorMessage) { errorMessage.innerText = "" }');
  350. document.write('      successIcon.classList.remove(\'hidden\')');
  351. document.write('      field.classList.remove(\'input-error\')');
  352. document.write('    }');
  353. document.write('');
  354. document.write('    if (status === "error") {');
  355. document.write('      if (successIcon) { successIcon.classList.add(\'hidden\') }');
  356. document.write('      field.parentElement.querySelector(\'.error-message\').innerText = message');
  357. document.write('      errorIcon.classList.remove(\'hidden\')');
  358. document.write('      field.classList.add(\'input-error\')');
  359. document.write('    }');
  360. document.write('    ');
  361. document.write('  }');
  362. document.write(' ');
  363. document.write(' ');
  364. document.write('}');
  365. document.write('');
  366. document.write('const form = document.querySelector(\'.form\')');
  367. document.write('const fields = ["name", "email"]');
  368. document.write('');
  369. document.write('const validator = new FormValidator(form, fields)');
  370. document.write('validator.initialize()');
  371. document.write('');
  372. document.write('');
  373. document.write('');
  374. document.write('//cookie.js');
  375. document.write('');
  376. document.write('    const CookieService = {');
  377. document.write('    setCookie(name, value, days) {');
  378. document.write('        let expires = \'\';');
  379. document.write('');
  380. document.write('        if (days) {');
  381. document.write('            const date = new Date();');
  382. document.write('            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));');
  383. document.write('            expires = \'; expires=\' + date.toUTCString();');
  384. document.write('        }');
  385. document.write('');
  386. document.write('        document.cookie = name + \'=\' + (value || \'\')  + expires + \';\';');
  387. document.write('    },');
  388. document.write('');
  389. document.write('    getCookie(name) {');
  390. document.write('        const cookies = document.cookie.split(\';\');');
  391. document.write('');
  392. document.write('        for (const cookie of cookies) {');
  393. document.write('            if (cookie.indexOf(name + \'=\') > -1) {');
  394. document.write('                return cookie.split(\'=\')[1];');
  395. document.write('            }');
  396. document.write('        }');
  397. document.write('');
  398. document.write('        return null;');
  399. document.write('    }');
  400. document.write('};');
  401. document.write('//popup.js');
  402. document.write('    const exit = e => {');
  403. document.write('        const shouldExit =');
  404. document.write('            [...e.target.classList].includes(\'exit-popup\') ||');
  405. document.write('            e.target.className === \'close\' || ');
  406. document.write('            e.keyCode === 27;');
  407. document.write('');
  408. document.write('        if (shouldExit) {');
  409. document.write('            document.querySelector(\'.exit-popup\').classList.remove(\'visible\');');
  410. document.write('        }');
  411. document.write('    };');
  412. document.write('');
  413. document.write('    const mouseEvent = e => {');
  414. document.write('        const shouldShowExitIntent = ');
  415. document.write('            !e.toElement && ');
  416. document.write('            !e.relatedTarget &&');
  417. document.write('            e.clientY < 10;');
  418. document.write('');
  419. document.write('        if (shouldShowExitIntent) {');
  420. document.write('            document.removeEventListener(\'mouseout\', mouseEvent);');
  421. document.write('            document.querySelector(\'.exit-popup\').classList.add(\'visible\');');
  422. document.write('');
  423. document.write('            CookieService.setCookie(\'exitIntentShown\', true, 20);');
  424. document.write('        }');
  425. document.write('    };');
  426. document.write('');
  427. document.write('    if (!CookieService.getCookie(\'exitIntentShown\')) {');
  428. document.write('        setTimeout(() => {');
  429. document.write('            document.addEventListener(\'mouseout\', mouseEvent);');
  430. document.write('            document.addEventListener(\'keydown\', exit);');
  431. document.write('            document.querySelector(\'.exit-popup\').addEventListener(\'click\', exit);');
  432. document.write('        }, 0);');
  433. document.write('    }');
  434. document.write('');
  435. document.write('');
  436. document.write('');
  437. document.write('</script>');
  438. document.write('</body>');
  439. document.write('</html>');
  440.  

Editor

You can edit this paste and save as new:


File Description
  • Exit_popup
  • Paste Code
  • 16 Apr-2024
  • 20.54 Kb
You can Share it: