Instrutivo popup Exit


Suba la carpeta popup_exit al directorio raiz del servidor


Agregue los siguientes archivos en el interior de la etiqueta head de su html:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href = "popup_exit/popup_exit.css" rel = "stylesheet"/>
<script src = "popup_exit/jquery-3.4.1.min.js"></script>
<script src = "popup_exit/popup_exit.js"></script>

Si la pagina ya tiene jQuery y el meta viewport no necesita agregarlos


Agregue antes que cierre el body de su html el siguiente codigo:

<style>
	.div_fondo .boton1
	{
		display:block;
		height:50px;
		width:100%;
		margin-bottom:10px;
		border-radius:20px;
		outline:none;
		/* Defina la tipografia y tamaño de fuente */
		font-family:Arial;
		font-size:20px;
		cursor:pointer;
		color:green;
		border-color:green;
		
		
	}
	.div_fondo .boton1:hover 
	{
		background-color:green;
		color:white;
	}
	.div_fondo .boton2
	{
		display:block;
		height:50px;
		width:100%;
		margin-bottom:10px;
		border-radius:20px;
		outline:none;
		/* Defina la tipografia y tamaño de fuente */
		font-family:Arial;
		font-size:20px;
		cursor:pointer;
		color:green;
		border-color:green;
		
		
	}
	.div_fondo .boton2:hover 
	{
		background-color:green;
		color:white;
	}
	.div_fondo .boton3
	{
		display:block;
		height:50px;
		width:100%;
		margin-bottom:10px;
		border-radius:20px;
		outline:none;
		/* Defina la tipografia y tamaño de fuente */
		font-family:Arial;
		font-size:20px;
		cursor:pointer;
		color:green;
		border-color:green;
		
	}
	.div_fondo .boton3:hover 
	{
		background-color:green;
		color:white;
	}
	.div_fondo .boton4
	{
		display:block;
		height:50px;
		width:100%;
		margin-bottom:10px;
		border-radius:20px;
		outline:none;
		/* Defina la tipografia y tamaño de fuente */
		font-family:Arial;
		font-size:20px;
		cursor:pointer;
		color:green;
		border-color:green;
		
		
	}
	.div_fondo .boton4:hover 
	{
		background-color:green;
		color:white;
	}
</style>

<div class = "div_fondo">
	<div class = "div_popup_escritorio">
		<img src = "popup_exit/imagen_popup.jpg"/>
		<button type = "button" style = "display:block" class = "boton1" onclick="window.location.href = 'https://www.ebay.com';">Boton1</button>
		<button type = "button" style = "display:block" class = "boton2">Boton2</button>
		<div class = "boton_cerrar" style = "display:block">
			<img src = "popup_exit/cerrar.png"/>
		</div>
	</div>
	<div class = "div_popup_movil">
		<div class = "parrafo">
			<p>
			Popup movil
			</p>
		</div>
		<button type = "button" style = "display:block" class = "boton3" onclick="window.location.href = 'https://www.ebay.com';">Boton3</button>
		<button type = "button" style = "display:block" class = "boton4">Boton4</button>
		<div class = "boton_cerrar" style = "display:block">
			<img src = "popup_exit/cerrar.png"/>
		</div>
	</div>
</div>
	
Modificar imagenes:

Para modificar la imagen del popup cambie el atributo src aqui: <img src = "popup_exit/imagen_popup.jpg"/>
La imagen del popup debe tener 500px de ancho, si desea que tenga un ancho diferente agregue el ancho asi, ejemplo 700:
<div class = "div_popup_escritorio" style = "width:700px">

Para modificar la imagen del boton de cerrar cambie el atributo src aqui: <img src = "popup_exit/cerrar.png"/>


	
	
Desaparecer botones popup_escritorio y popup_movil:


En las cuatro etiquetas llamadas <button></button> cambiar los atributos display:block por display:none 
en el boton que desea que desaparezca de igual manera puede cambiar el texto al interior del <button></button>


Desaparecer el boton de cerrar:
En el div boton_cerrar cambiar los atributos display:block por display:none asi:
<div class = "boton_cerrar" style = "display:none">


Definir el maximo de veces que sale el popup:
En el archivo popup_exit.js cambiar la variable maximo por el valor que desee

Definir la url al darle click a un boton:
En la url https://www.ebay.com la reemplaza por la url donde quiera que el boton vaya
<button type = "button" style = "display:block" class = "boton3" onclick="window.location.href = 'https://www.ebay.com';">Boton3</button>