JQuery: Mensagem de processando (modal)
Olá pessoal!
Sabe aquela janelinha que aparece antes de efetuar um processamento, antes de enviar um email, ex: “aguarde…”, “dados sendo enviados…”, “processando…” etc; você vai aprender neste post.
Vamos utilizar o dialog do Jquery UI.
JQuery $.ajax
// index.php
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Modal</title> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#botao').on("click", funcTeste); $( "#process" ).dialog({ autoOpen: false, width: 400, resizable: false, draggable: false, close: function(){ // executa uma ação ao fechar //alert("você fechou a janela"); } }); function funcTeste() { $.ajax({ type: 'POST', url:'url.php', data:{ 'id': 999999 }, beforeSend: function() { $( "#process" ).dialog( "open" ).html("<p>Enviando os dados...</p>"); } }).done(function(data) { $( "#process" ).html(data); }); } }); </script> </head> <body> <input type="button" id="botao" value="clique aqui" /> <div id="process" title="Mensagem"></div> </body> </html> |
// url.php
<?php $id = intval($_POST['id']); for ($i=0;$i<1000000;$i++){ if ($id == $i){ echo "<p>Sua mensagem foi enviada com sucesso!</p>"; break; } } ?> |
Veja o funcionamento desse script, clicando aqui.