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.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *