Como detectar intenção de saída com jquery.exitintent.js

jquery.exitintent.js é um plug-in de intenção de saída muito pequeno com jQuery que detecta se o mouse sai da vista e dispara um evento quando o usuário está prestes a sair da página atual. Útil para criar pop-ups com intenção de saída para confirmação, assinatura de e-mail, compartilhamento social e muito mais.

Como usá-lo:

1. O plug-in jquery.exitintent.js deve ser carregado após a biblioteca JavaScript jQuery da seguinte maneira:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.exitintent.js"></script>

2. Ative o evento ‘exitIntent’

$.exitIntent('enable');

3. Vincule o evento ‘exitIntent’ ao seu documento e faça o que quiser se o cursor sair da vista.

$(document).bind('exitintent', function() {
  // ... 
});

Vamos fazer um exemplo de demostração na pratica para intendermos melhor o procedimento, vamos utilizar a seguinte arquitetura de pasta e arquivos em nosso exemplo:

arquitetura de pasta e arquivos para nosso demostração

Arquivo: teste.html

Abra seu editor de texto/código favorito e copie e cole o código abaixo, salve ele com o nome teste e extensão “.html”, esse será seu arquivo teste.html.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Demonstração do plug-in de intenção de saída do jQuery</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="jquery.exitintent.js"></script>
	<script>
	$(function() {
		$.exitIntent('enable');
		$(document).bind('exitintent', function() {
			$("#warning").slideDown();
		});
		$("#warning a").bind('click', function() {
			$("#warning").slideUp();
			return false;
		});
	});
    </script>
	<style>
    body { background-color:#f7f7f7; font-family:'Open Sans';}
		#ask,#warning {
			margin: 2em auto;
			width: 50%;
			font-size: large;
			padding: 2em;
			text-align: center;
		}
		#ask {
			background-color: yellow;
		}
		#warning {
			display: none;
			background-color: #faa;
		}
        h1 { margin:50px auto; text-align:center;}
	</style>
	</head>
<body>
<h1>Demonstração do plug-in de intenção de saída do jQuery</h1>
	<div id="ask">
	  <p>Por favor, não saia desta página</p>
	</div>
	<div id="warning">
		<p>Eu disse <b>não saia desta página!</b></p>
		<p><a href="#">Entendi!</a></p>
	</div>
</body>
</html>

Arquivo: jquery.exitintent.js

Abra seu editor de texto favorito e copie e cole o código abaixo, salve ele com o nome jquery.exitintent.js na mesma pasta que você salvou o arquivo teste.html

(function ($) {
    'use strict';

    var timer;

    function trackLeave(ev) {
        if (ev.clientY > 0) {
            return;
        }

        if (timer) {
            clearTimeout(timer);
        }

        if ($.exitIntent.settings.sensitivity <= 0) {
            $.event.trigger('exitintent');
            return;
        }

        timer = setTimeout(
            function() {
                timer = null;
                $.event.trigger('exitintent');
            }, $.exitIntent.settings.sensitivity);
    }

    function trackEnter() {
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
    }

    $.exitIntent = function(enable, options) {
        $.exitIntent.settings = $.extend($.exitIntent.settings, options);

        if (enable == 'enable') {
            $(window).mouseleave(trackLeave);
            $(window).mouseenter(trackEnter);
        } else if (enable == 'disable') {
            trackEnter(); // Turn off any outstanding timer
            $(window).unbind('mouseleave', trackLeave);
            $(window).unbind('mouseenter', trackEnter);
        } else {
            throw "Invalid parameter to jQuery.exitIntent -- should be 'enable'/'disable'";
        }
    }

    $.exitIntent.settings = {
        'sensitivity': 300
    };

})(jQuery);

Agora execute o arquivo teste.html em seu navegador para ver o exemplo em execução, verá algo semelhante a isso:

Plugin jQuery Alternativo Versão Minificada: jquery.exitintent.min.js

Como uma alternativa de carregamento mais rápido você pode utilizar a versão minificada, basta criar e salvar o arquivo jquery.exitintent.min.js e utilizar em seus projetos ele substitui a utilização do arquivo “jquery.exitintent.js” que citamos anteriormente.

(function(a){function d(e){0<e.clientY||(b&amp;&amp;clearTimeout(b),0>=a.exitIntent.settings.sensitivity?a.event.trigger("exitintent"):b=setTimeout(function(){b=null;a.event.trigger("exitintent")},a.exitIntent.settings.sensitivity))}function c(){b&amp;&amp;(clearTimeout(b),b=null)}var b;a.exitIntent=function(b,f){a.exitIntent.settings=a.extend(a.exitIntent.settings,f);if("enable"==b)a(window).mouseleave(d),a(window).mouseenter(c);else if("disable"==b)c(),a(window).unbind("mouseleave",d),a(window).unbind("mouseenter",
c);else throw"Invalid parameter to jQuery.exitIntent -- should be 'enable'/'disable'";};a.exitIntent.settings={sensitivity:300}})(jQuery);

Código Bônus:

Vou deixar um exemplo de bônus onde poderemos utilizar o plugin citado acima, para criarmos um full screen pop-up com intensão de saída:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demonstração 2 do plug-in de intenção de saída do jQuery</title>
	
	<!-- JQuery e JavaScripts -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="jquery.exitintent.js"></script>
	<script>
	$(function() {
		$.exitIntent('enable');
		$(document).bind('exitintent', function() {
			$("#fullLead").slideDown();
		});
		$("#miami-ButtonElement--dy0dwEt8RCv85AM2kK02").bind('click', function() {
			$("#fullLead").slideUp();
			return false;
		});
	});
    </script>
    <!-- FIM - JQuery e JavaScripts -->

    <!-- ESTILO DO POP-UP Código do página -->
	<style type="text/css">
		#ask,#warning {
			margin: 2em auto;
			width: 50%;
			font-size: large;
			padding: 2em;
			text-align: center;
		}
		#ask {
			background-color: yellow;
		}
		#warning {
			display: none;
			background-color: #faa;
		}
	   	#fullLead {display: none;}.cWMJZo{background: transparent !important; border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-width: 0px !important; border-color: rgba(0,0,0,.35) !important; border-left-width: 0px !important; border-right-width: 0px !important; border-style: none !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-top-width: 0px !important; box-shadow: 0px 0px 0px 0px #ffffff !important; color: rgba(255,255,255,0.84) !important; font-family: Open Sans !important; font-size: 13px !important; font-weight: 400 !important; -webkit-letter-spacing: 0 !important; -moz-letter-spacing: 0 !important; -ms-letter-spacing: 0 !important; letter-spacing: 0 !important; line-height: 1 !important; margin-bottom: 0px !important; margin-left: 0px !important; margin-right: 0px !important; margin-top: 20px !important; max-width: 100% !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-transform: none !important; -webkit-text-decoration: underline !important; text-decoration: underline !important; width: 100% !important; cursor: pointer;} html div#fullLead .miami *{box-sizing:border-box} html div#fullLead .miami .Element__content {min-height: 30px} html div#fullLead .miami button {width: auto;} html div#fullLead .miami-FieldsElement--wrapper input:not([type="submit"]), html div#fullLead .miami-FieldsElement--wrapper select, html div#fullLead .miami-FieldsElement--wrapper textarea { background-color: #fff; width: 100%; height: auto; border: 1px solid; padding: 10px 6px; overflow: hidden; margin: 0; vertical-align: middle; font-style: normal; width: 100%; line-height: 1.5 } html div#fullLead .miami-FieldsElement--wrapper textarea { height: 60px; } html div#fullLead .miami-FieldsElement--wrapper textarea, html div#fullLead .miami-FieldsElement--wrapper input { overflow: hidden; -webkit-appearance: none; } html div#fullLead .miami-FieldsElement--wrapper input[type=submit], html div#fullLead .miami-FieldsElement--wrapper button { cursor: pointer; } html div#fullLead .miami-FieldsElement--wrapper input[type=checkbox], html div#fullLead .miami-FieldsElement--wrapper input[type=radio] { width: auto !important; outline: invert none medium; padding: 0; margin: 0; height: auto !important; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; display: inline; } html div#fullLead .miami-FieldsElement--wrapper input[type=checkbox] { -webkit-appearance: checkbox; } html div#fullLead .miami-FieldsElement--wrapper input[type=radio] { -webkit-appearance: radio; } html div#fullLead .miami-FieldsElement--wrapper.FieldsElement--vertical input {} html div#fullLead .miami-FieldsElement--wrapper.FieldsElement--horizontal input, html div#fullLead .miami-FieldsElement--wrapper.FieldsElement--horizontal button {} html div#fullLead .miami-FieldsElement--wrapper.FieldsElement--horizontal .FieldsElement--privacyText {} html div#fullLead .miami-FieldsElement--wrapper strong { font-weight: bolder; } html div#fullLead .miami-FieldsElement--wrapper em { font-style: italic; } html div#fullLead .miami-FieldsElement--wrapper ul { list-style-type: disc; margin: 1em 0 1em 1.5em; } html div#fullLead .miami-FieldsElement--wrapper ol { list-style: decimal; margin: 1em 0 1em 1.5em; } html div#fullLead .miami-FieldsElement--wrapper sup {top: -0.5em; } html div#fullLead .miami-FieldsElement--wrapper sub {bottom: -0.5em; } html div#fullLead .miami-FieldsElement--wrapper sub, html div#fullLead .miami-FieldsElement--wrapper sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } html div#fullLead .miami-FieldsElement--wrapper p { margin: 0 0 5px; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; } html div#fullLead .miami-FieldsElement--wrapper p:first-of-type { margin-top: 0; } html div#fullLead .miami-FieldsElement--wrapper p:last-of-type { margin-bottom: 0; } html div#fullLead .miami-TextElement--content strong { font-weight: bolder; } html div#fullLead .miami-TextElement--content em { font-style: italic; } html div#fullLead .miami-TextElement--content ul { list-style-type: disc; margin: 1em 0 1em 1.5em; } html div#fullLead .miami-TextElement--content ol { list-style: decimal; margin: 1em 0 1em 1.5em; } html div#fullLead .miami-TextElement--content sup { top: -0.5em; } html div#fullLead .miami-TextElement--content sub { bottom: -0.5em; } html div#fullLead .miami-TextElement--content sub, html div#fullLead .miami-TextElement--content sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } html div#fullLead .miami-TextElement--content p { margin: 0 0 5px; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; } html div#fullLead .miami-TextElement--content p:first-of-type { margin-top: 0; } html div#fullLead .miami-TextElement--content p:last-of-type { margin-bottom: 0; } @media screen and (min-width: 1px) and (max-width: 720px) { html div#fullLead .miami-ClosePosition--top-right { right: 0 !important } html div#fullLead .miami-ClosePosition--top-left { left: 0 !important } html div#fullLead .miami-ClosePosition--bottom-right { right: 0 !important } html div#fullLead .miami-ClosePosition--bottom-left { left: 0 !important } html div#fullLead .Row .Row__content { flex-direction: column; } html div#fullLead .Row .Row__content .Column { width: 100% !important; } html div#fullLead .FieldsElement--horizontal input, html div#fullLead .FieldsElement--horizontal button { 	width: 100% !important; } } @media screen and (min-width: 1px) and (max-width: 400px) { html div#fullLead .CampaignType--slide { 	right: auto !important; max-width: 100% !important; } } html div#fullLead.MagicMediaQuery-mobile .miami-ClosePosition--top-right { right: 0 !important } html div#fullLead.MagicMediaQuery-mobile .miami-ClosePosition--top-left { left: 0 !important } html div#fullLead.MagicMediaQuery-mobile .miami-ClosePosition--bottom-right { right: 0 !important } html div#fullLead.MagicMediaQuery-mobile .miami-ClosePosition--bottom-left { left: 0 !important } html div#fullLead.MagicMediaQuery-mobile .Row .Row__content { flex-direction: column; } html div#fullLead.MagicMediaQuery-mobile .Row .Row__content .Column { width: 100% !important; } html div#fullLead.MagicMediaQuery-mobile .FieldsElement--horizontal input, html div#fullLead.MagicMediaQuery-mobile .FieldsElement--horizontal button { width: 100% !important; } html div#fullLead.MagicMediaQuery-mobile .CampaignType--slide { right: auto !important; max-width: 100% !important; } label.om-conversion-label { font-size: 14px; color: #505050; margin-bottom: 6px; display: block; }
	</style>
	<!-- FIM - ESTILO DO POP-UP Código do página -->

</head>
<body>

<!-- Código do conteúdo da página -->
	<h1>Demonstração 2 do plug-in de intenção de saída do jQuery</h1>
	<div id="ask">
	  <p>Por favor, não saia desta página</p>
	</div>
	<div id="warning">
		<p>Eu disse <b>não saia desta página!</b></p>
		<p><a href="#">Entendi!</a></p>
	</div>
<!-- ... -->
<!-- FIM - Código do conteúdo da página -->

<!-- Código do POP-UP -->
<div id="fullLead" class="Campaign CampaignType--fullscreen " style="position: fixed; z-index: 888888888; top: 0px; right: 0px; bottom: 0px; left: 0px; zoom: 1; width: 100%; height: 100%; margin: 0px; padding: 0px; overflow: auto; border: 0px; border-radius: 0px; float: none; letter-spacing: normal; outline: none; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; visibility: visible; line-height: 1; font-family: helvetica, arial, san-serif; box-shadow: none; -webkit-font-smoothing: antialiased; -webkit-appearance: none;">
   <div class="CampaignFullscreen__alphaLayer" style="position:absolute;top:0;left:0;right:0;bottom:0;zoom:1;width:auto;height:100%;overflow-x:auto">
      <div class="CampaignFullscreen__bravoLayer" style="background:#51c5d1;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;border-color:#b1bacb;border-style:solid;position:absolute;top:0;left:0;right:0;bottom:0;zoom:1;width:auto;height:100%;overflow-x:auto">
         <div id="fullLead-optin" class="miami Campaign__canvas" style="display: block; top: 271px; margin-bottom: 0px; position: absolute; min-height: 175px; max-width: 700px; width: 100%; z-index: 2147483647; left: 579px; transition: top 0.2s ease 0s, left 0.2s ease 0s, margin-bottom 0.2s ease 0s;" role="dialog" aria-live="polite">
            <div class="Campaign__innerWrapper" style="outline:none;position:relative" tabindex="0">
               <div class="Campaign__alphaLayer" style="background:rgba(255, 255,255,0);border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-color:#b1bacb';border-style:none;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;box-shadow:0px 0px 0px 0px #ffffff;position:relative">
                  <div class="Campaign__bravoLayer">
                     <div class="Campaign__content" style="width:100%;max-width:700px;margin:0 auto;position:relative;padding-top:0.001em;padding-right:0.001em;padding-left:0.001em;padding-bottom:50px;background:none">
                        
                        
                        <div class="Row">
                           <div class="Row__content">
                              <div style="display:flex;width:100%;flex-direction:inherit;background:transparent;border-style:solid;border-width:0px;border-color:#000000;border-top-left-radius:0%;border-top-right-radius:0%;border-bottom-right-radius:0%;border-bottom-left-radius:0%;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;box-shadow:0px 0px 0px 0px #ffffff;max-width:100%">
                                 <div class="Column" style="display:inline-block;width:100%">
                                    <div class="Column__content" style="height:100%">
                                       <div style="background:transparent;border-style:solid;border-width:0px;border-color:#000000;border-top-left-radius:0%;border-top-right-radius:0%;border-bottom-right-radius:0%;border-bottom-left-radius:0%;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;box-shadow:0px 0px 0px 0px #ffffff;max-width:100%;height:100%">
                                          <div class="Element">
                                             <div class="Element__content">
                                                <div class="miami-TextElement--wrapper Hz5lVylLDNiqhve0Rq2X" style="background-color:transparent;border-style:solid;border-width:0px;border-color:#000000;border-top-left-radius:0%;border-top-right-radius:0%;border-bottom-right-radius:0%;border-bottom-left-radius:0%;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;box-shadow:0px 0px 0px 0px #ffffff;width:auto;max-width:100%">
                                                   <div class="miami-TextElement--content" style="overflow-wrap:break-word;text-align:left;font-family:Montserrat;color:#000000;font-size:16px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;text-decoration:none">
                                                      <p style="text-align:center;"><span style="color: rgb(255,255,255);font-size: 46px;font-family: Montserrat;">[Porque o usamos?]</span></p>
                                                      <p style="text-align:center;"><span style="color: rgb(255,255,255);font-size: 46px;font-family: Montserrat;">É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página.</span></p>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="Row">
                           <div class="Row__content">
                              <div style="display:flex;width:100%;flex-direction:inherit;background:transparent;border-style:solid;border-width:0px;border-color:#000000;border-top-left-radius:0%;border-top-right-radius:0%;border-bottom-right-radius:0%;border-bottom-left-radius:0%;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;box-shadow:0px 0px 0px 0px #ffffff;max-width:100%">
                                 <div class="Column" style="display:inline-block;width:100%">
                                    <div class="Column__content" style="height:100%">
                                       <div style="background:transparent;border-style:solid;border-width:0px;border-color:#000000;border-top-left-radius:0%;border-top-right-radius:0%;border-bottom-right-radius:0%;border-bottom-left-radius:0%;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;box-shadow:0px 0px 0px 0px #ffffff;max-width:100%;height:100%">
                                          <div class="Element">
                                             <div class="Element__content">
                                                <div class="miami-TextElement--wrapper sXPPyFk01ELiqk9QENnx" style="background-color:transparent;border-style:solid;border-width:0px;border-color:#000000;border-top-left-radius:0%;border-top-right-radius:0%;border-bottom-right-radius:0%;border-bottom-left-radius:0%;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-top:20px;margin-right:0px;margin-bottom:0px;margin-left:0px;box-shadow:0px 0px 0px 0px #ffffff;width:auto;max-width:100%">
                                                   <div class="miami-TextElement--content" style="overflow-wrap:break-word;text-align:left;font-family:Montserrat;color:#000000;font-size:16px;font-weight:500;line-height:1.2;letter-spacing:0;text-transform:none;text-decoration:none">
                                                      <p style="text-align:center;"><span style="color: rgb(255,255,255);font-size: 30px;font-family: Open Sans;">Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal!</span></p>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="Row">
                           <div class="Row__content">
                              <div style="display:flex;width:100%;flex-direction:inherit;background:transparent;border-style:solid;border-width:0px;border-color:#000000;border-top-left-radius:0%;border-top-right-radius:0%;border-bottom-right-radius:0%;border-bottom-left-radius:0%;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;box-shadow:0px 0px 0px 0px #ffffff;max-width:100%">
                                 <div class="Column" style="display:inline-block;width:100%">
                                    <div class="Column__content" style="height:100%">
                                       <div style="background:transparent;border-style:solid;border-width:0px;border-color:#000000;border-top-left-radius:0%;border-top-right-radius:0%;border-bottom-right-radius:0%;border-bottom-left-radius:0%;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;margin-top:40px;margin-right:0px;margin-bottom:0px;margin-left:0px;box-shadow:0px 0px 0px 0px #ffffff;max-width:100%;height:100%">
                                          <div class="Element">
                                             <div class="Element__content">
                                                <div class="miami-FieldsElement--wrapper FieldsElement--customHTML i45V8Kdv7gj6eqPcDf7P" style="background:transparent;border-style:solid;border-width:0px;border-color:#000000;border-top-left-radius:0%;border-top-right-radius:0%;border-bottom-right-radius:0%;border-bottom-left-radius:0%;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;padding-top:0%;padding-right:12%;padding-bottom:0%;padding-left:12%;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;box-shadow:0px 0px 0px 0px #ffffff;width:auto;max-width:100%;position:relative">
                                                   <div class="miami-FieldsElement--content" style="display:block;flex-wrap:wrap;position:relative">
                                                      <div class="customHtml">
                                                         
                                                      </div>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                          <div class="Element">
                                             <div class="Element__content">
                                                <div class="miami-ButtonElement--wrapper dy0dwEt8RCv85AM2kK02" style="text-align:left;background:transparent;border-style:solid;border-width:0px;border-color:#000000;border-top-left-radius:0%;border-top-right-radius:0%;border-bottom-right-radius:0%;border-bottom-left-radius:0%;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;box-shadow:0px 0px 0px 0px #ffffff;width:auto;max-width:100%;position:relative">
                                                   <div class="miami-ButtonElement--content"><button class="miami-field-button sc-bdVaJa cWMJZo" id="miami-ButtonElement--dy0dwEt8RCv85AM2kK02" name="miami-button--dy0dwEt8RCv85AM2kK02" icon="miami-icon--dy0dwEt8RCv85AM2kK02" title="Não tenho interesse, obrigado." value="Não tenho interesse, obrigado." aria-live="polite" type="button" tabindex="3">Não tenho interesse, obrigado.</button></div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- FIM - Código do POP-UP -->

</body>
</html>

Minha intensão com esses exemplos é totalmente para fins didáticos, não garanto o funcionamento e nenhum dano que você pode fazer ao utilizar em seus projetos, a utilização dos exemplos citados nesse artigo é por sua conta e risco, lembre-se de fazer backup sempre que for incrementar novas funcionalidades em seus projetos finais, e sintase livre para utilizar os exemplos citados neste artigo da forma que desejar.

Junte-se a nós e esteja sempre atualizado com as últimas novidades e dicas