To show the message in a floating box, you should be talking about creating a snackbar. In the code below, I added the snackbar and the download button. The download button loads the page as hidden, and after success in the ajax request, the CSS class that makes it hidden is removed by jquery and the Submit button is also removed. The code looks something like this:
// Função responsável por mostrar e remover o snackbar
function snackbar() {
// Get the snackbar DIV
var x = document.getElementById("snackbar");
// Add the "show" class to DIV
x.className = "show";
// After 3 seconds, remove the show class from DIV
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
// Sua função que faz a requisição AJAX
jQuery(document).ready(function() {
jQuery('#ajax_form').submit(function() {
var dados = jQuery(this).serialize();
jQuery.ajax({
type: "POST",
url: "newsletter-form.php",
data: dados,
success: function envio() {
// Mostra o snackbar na tela
snackbar()
// Mostra o botão de download
$("#btnDownload").removeClass('hidden');
// Remove o botão de enviar
$("#btnEnviar").remove();
var cont = "Email enviado com sucesso";
document.getElementById("msg").innerHTML = cont;
}
});
return false;
});
});
/* Classe para ocultar o botão de download */
.hidden {
visibility: hidden;
}
/* CSS do Snackbar */
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
visibility: hidden; /* Hidden by default. Visible on click */
min-width: 250px; /* Set a default minimum width */
margin-left: -125px; /* Divide value of min-width by 2 */
background-color: #333; /* Black background color */
color: #fff; /* White text color */
text-align: center; /* Centered text */
border-radius: 2px; /* Rounded borders */
padding: 16px; /* Padding */
position: fixed; /* Sit on top of the screen */
z-index: 1; /* Add a z-index if needed */
left: 50%; /* Center the snackbar */
bottom: 30px; /* 30px from the bottom */
}
/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
visibility: visible; /* Show the snackbar */
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 2.5 seconds */
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cadastro</title>
<link rel="stylesheet" type="text/css" href="assets/css/theme.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="assets/js/jquery.js"></script>
</head>
<body>
<div class="for">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<form id="ajax_form" name="signup" method="post" action="cadastro.php">
<div class="form-group">
<input type="text" id="name_user" class="form-control" name="nome" required placeholder="Seu nome" />
</div>
<div class="form-group">
<input type="email" id="email_user" class="form-control" name="email" required placeholder="Seu email" />
</div>
<div class="form-group">
<input type="tel" id="telefone_user" class="form-control" name="telefone" required placeholder="Seu telefone" />
</div>
<button id='btnEnviar' class="btn btn-primary btn-block btn-register">
Enviar</button>
<button id='btnDownload' class="hidden btn btn-primary btn-block btn-register">Download</button>
<!-- Snackbar -->
<div id="snackbar">E-mail enviado.</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
