JSFiddle - React, Tailwind, and code Playground

by pedroaugustoneto

HTML

<button id="ativa" class="btn btn-default" >Salvar</button>
<button id="desativa" class="btn btn-primary" >Não</button>
 
<div class="modal fade" id="modalCancelar" tabindex="-1" role="dialog" aria-hidden="false" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
               
              	<div id="divAlert1"  align="center" class="form-group" style="margin-top: 20px; margin-bottom: 15px;">
                    <label style="font-family: arial; font-weight: normal; color: #A0A0A0; margin-left: 15px; margin-right: 10px;">Certifique se os dados estão corretos?</label>
                	<div align="center">
                		<button id="btSimCancelarModal" type="button" class="btn btn-primary" style="margin-top: 20px;">Sim</button>
                		<button  type="button" class="btn btn-default" data-dismiss="modal" style="margin-top: 20px;">Não</button>
                	</div>
                </div>
                
                <div id="divAlert2" align="center" class="form-group" style="margin-top: 20px; margin-bottom: 15px;">
                	<p>
                  		<img src="http://s12.postimg.org/6a0hd0b4p/loading5.gif">
  						<label style="color: #9399a3;font-weight: normal;font-size: 10pt;margin-left: 3px;">Aguarde...</label>
                  	</p>
                </div>
                
                <div id="divAlert3" align="center" class="form-group" style="margin-top: 20px; margin-bottom: 15px;">
                	<label id="lbCancelarMoadl1" style="font-family: arial; font-weight: normal; color: #A0A0A0; margin-left: 15px; margin-right: 10px;"></label>
                  	<div align="center">
                  		<button id="btCancelarModal2" type="button" class="btn btn-default" data-dismiss="modal" style="margin-top: 20px;"><i class="fa fa-times"></i> Fechar</button>
                  	</div>
                </div>
                
                <div...

CSS

#divAlert2 { display:none; }
#divAlert3 { display:none; }
#divAlert4 { display:none; }

JavaScript

$('#ativa').on('click',function(e) {
    $('#modalCancelar').modal('show');
    return false;
});

$('#desativa').on('click',function(e) {
    $('#modalCancelar').modal('hide');
    return false;
});

$('#btSimCancelarModal').on('click',function(e) {
    
    jQuery.ajax({
        type: 'GET',
        url: '',
        
        beforeSend : function () {
            
            $('#divAlert1').hide();
            $('#divAlert2').show();
            
        },
        success: function( data )
        {
            alert( 'OK' );
        }
    });
			
	return false;
});