flavioso16/exemploModal.html

## exemploModal.html
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal-argos {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
	font-family: sans-serif;
}

/* Modal Content */
.modal-argos-content {
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
	font-family: sans-serif;
	border-radius: 10px;
}

.modal-argos-content .modal-argos-msg {
	padding: 20px;
	text-align: center;
}

/* The Close Button */
.modal-argos-close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
	font-family: sans-serif;
	margin-right: 5px;
}

.modal-argos-close:hover,
.modal-argos-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<img id="btn_login" style="cursor:pointer"
	src="http://www.marisa.com.br/imagens/bol/reskin/mosaico/20160706/facebook.jpg"
	title="Ganhe R$30,00 de desconto!">

<!-- The Modal -->
<div id="modal-cadastro-sucesso" class="modal-argos">

  <!-- Modal content -->
  <div class="modal-argos-content" style="width: 400px;">
    <div class="modal-argos-close">
		<span>x</span>
	</div>
    <div class="modal-argos-msg">
		<p>Cadastro efetuado com sucesso!</p>
	</div>
  </div>

</div>
<script src="http://argos4.me/Scripts/common_v4.js"></script>
<script src="https://connect.facebook.net/pt_BR/all.js"></script>
<script>
(function(){
	var modal = document.getElementById('modal-cadastro-sucesso');
	var btn=document.getElementById("btn-open");
	var btnClose = document.getElementsByClassName("modal-argos-close")[0];
	if(btn){
		btn.onclick = function(){
			openArgosModal();
		}
	};
	btnClose.onclick=function(){
		closeArgosModal();
	};
	window.onclick=function(event){
		if(event.target==modal){
			closeArgosModal();
		}
	};
	window.openArgosModal=function openArgosModal(){
		modal.style.display="block";
	};
	window.closeArgosModal=function closeArgosModal(){
		modal.style.display = "none";
	};
})();

$(document).ready(function () {
	var argosApiEndpoint = 'https://sba.argos4.me/api/SocialUser/SendNotificationPromocodeMarisa';
	_argosFbInit('763388567141272'); // Inicia o APP da Marisa

	FB.getLoginStatus(function(response) {
	  if (response.status === 'connected') {
		$("#btn_login").attr("src","second.jpg");
	  }
	 });

	$("#btn_login").click(function () {
		_argosLogin(function (response) { // Método que faz o login
			_argosSignFacebookUserToProduct(response, 59, 'Social Login', function () {
				console.log('Optin Argos Sucess');

				fetch(argosApiEndpoint + '?facebookId=' + response.id, {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					}

				}).then(function () {
					openArgosModal();
					if (typeof functionCallback == 'function') {
						functionCallback();
					}
				}).catch(function (err) {
					console.log('error POST resource');
				});

			});
		},
		function () {
			console.log('Ocorreu um erro ao chamar API Argos');
		});
	});
});


</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	/* The Modal (background) */
	.modal-argos {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
	font-family: sans-serif;
	}

	/* Modal Content */
	.modal-argos-content {
	background-color: #fefefe;
	margin: auto;
	border: 1px solid #888;
	font-family: sans-serif;
	border-radius: 10px;
	}

	.modal-argos-content .modal-argos-msg {
	padding: 20px;
	text-align: center;
	}

	/* The Close Button */
	.modal-argos-close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	font-family: sans-serif;
	margin-right: 5px;
	}

	.modal-argos-close:hover,
	.modal-argos-close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
	}

	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	</head>
	<body>

	<img id="btn_login" style="cursor:pointer"
	src="http://www.marisa.com.br/imagens/bol/reskin/mosaico/20160706/facebook.jpg"
	title="Ganhe R$30,00 de desconto!">

	<!-- The Modal -->
	<div id="modal-cadastro-sucesso" class="modal-argos">

	<!-- Modal content -->
	<div class="modal-argos-content" style="width: 400px;">
	<div class="modal-argos-close">
	<span>x</span>
	</div>
	<div class="modal-argos-msg">
	<p>Cadastro efetuado com sucesso!</p>
	</div>
	</div>

	</div>
	<script src="http://argos4.me/Scripts/common_v4.js"></script>
	<script src="https://connect.facebook.net/pt_BR/all.js"></script>
	<script>
	(function(){
	var modal = document.getElementById('modal-cadastro-sucesso');
	var btn=document.getElementById("btn-open");
	var btnClose = document.getElementsByClassName("modal-argos-close")[0];
	if(btn){
	btn.onclick = function(){
	openArgosModal();
	}
	};
	btnClose.onclick=function(){
	closeArgosModal();
	};
	window.onclick=function(event){
	if(event.target==modal){
	closeArgosModal();
	}
	};
	window.openArgosModal=function openArgosModal(){
	modal.style.display="block";
	};
	window.closeArgosModal=function closeArgosModal(){
	modal.style.display = "none";
	};
	})();

	$(document).ready(function () {
	var argosApiEndpoint = 'https://sba.argos4.me/api/SocialUser/SendNotificationPromocodeMarisa';
	_argosFbInit('763388567141272'); // Inicia o APP da Marisa

	FB.getLoginStatus(function(response) {
	if (response.status === 'connected') {
	$("#btn_login").attr("src","second.jpg");
	}
	});

	$("#btn_login").click(function () {
	_argosLogin(function (response) { // Método que faz o login
	_argosSignFacebookUserToProduct(response, 59, 'Social Login', function () {
	console.log('Optin Argos Sucess');

	fetch(argosApiEndpoint + '?facebookId=' + response.id, {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	}

	}).then(function () {
	openArgosModal();
	if (typeof functionCallback == 'function') {
	functionCallback();
	}
	}).catch(function (err) {
	console.log('error POST resource');
	});

	});
	},
	function () {
	console.log('Ocorreu um erro ao chamar API Argos');
	});
	});
	});


	</script>
	</body>
	</html>