Crear una ventana modal ui con datos cargados desde una consulta ajax mediante Jquery

Bueno no me gusta escribir mucho sobre cuales librerías debes cargar y eso, en fin, debes tener jquery y jquery-ui para usar las modales. manos a la obra, bueno todos sabemos que debemos crear algún botón con id al cual darle click para que salte el modal, y crear un div con id del modal para poder modificarlo, esta modal contendrá un botón el cual serializara los datos para efectuar la consulta ajax, y un botón cancelar para cerrar la ventana modal. mas abajo vemos como se edita el html de la ventana modal para desplegar el mensaje en la ventana modal en este caso un típico quiere guardar los datos ? en fin no creo que necesite mas explicación este código a ver el código Sin título (2)
$(function(){
    
    var u = document.location.href.split("/");
    var n = u.length;
    var _url = "http:";
    var i=0;
    n=n-3;

    for(i=0;i<=n;i++){
        _url+="/"+u[i+1];
    }
        _url+="/guardar"    

    $('#guardar').click(function(){
        $('#modal').dialog({
                            autoOpen: false,
                            modal: true,
                            position:'center',
                            height: 200,
                            width: 250,
                            buttons: {
                "Aceptar": function() {
                    var checking = $('#check').jserialize();
                    loading('#cargando','Cargando');
                    $.ajax({
                           url:_url
                           ,type : "POST"
                           ,async: true
                           ,data : checking
                           ,success: function(msg){
                                $('#modal').dialog('close');
                                loading();
                           }
                    });                    
   
                },
                "Cancelar": function(){
                    $('#modal').dialog('close');
                }
            }    

        }); 

        var  html = " <br><br><br>";
        html+="<div class = 'ui-state-highlight  ui-corner-all'>";
        html+="<div class = 'ui-icon ui-icon-info '></div>";
        html+="<center>¿Seguro que quiere Guardar los Datos ? </center></div><br><br><br>";




        $('#modal').html (html);  

        $('#modal').dialog('open');


        });    
   
    
});

Comentarios

Entradas populares