Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
my dialog pantalla modal para webs
#1
Hola aqui les traigo la ventanita modal el mydialog para sus webs es mu facil y entretenida se parece a la web famosa la cual no dire nombre empiesa con t pero este es otro diseño bueno vamos con los codigos.

Creamos un archivo js ejemplo: abre el bloc de notas> pegas el siguiente codigo:
Código:
/* MyDialog */
var mydialog = {

is_show: false,
class_aux: '',
mask_close: true,
close_button: false,
show: function(class_aux){
    if(this.is_show)
        return;
    else
        this.is_show = true;
    if($('#mydialog').html()=='') //Primera vez
        $('#mydialog').html('<div id="dialog"><div id="title"></div><div id="cuerpo"><div id="procesando"><div id="mensaje"></div></div><div id="modalBody"></div><div id="buttons"></div></div></div>');

    if(class_aux==true)
        $('#mydialog').addClass(this.class_aux);
    else if(this.class_aux != ''){
        $('#mydialog').removeClass(this.class_aux);
        this.class_aux = '';
    }

    if(this.mask_close)
        $('#mask').click(function(){ mydialog.close() });
    else
        $('#mask').unbind('click');

    if(this.close_button)
        $('#mydialog #dialog').append('<img class="close_dialog" src="/Themes/default/icons/close_dialog.png" width="16px" onclick="mydialog.close()" />');
    else
        $('#mydialog #dialog .close_dialog').remove();

    $('#mask').css({'width':$(document).width(),'height':$(document).height(),'display':'block'});

    if(jQuery.browser.msie && jQuery.browser.version<7) //Fix IE<7 <- fack you
        $('#mydialog #dialog').css('position', 'absolute');
    else
        $('#mydialog #dialog').css('position', 'fixed');
    $('#mydialog #dialog').fadeIn('fast');
},
close: function(){
    //Vuelve todos los parametros por default
    this.class_aux = '';
    this.mask_close = true;
    this.close_button = false;

    this.is_show = false;
    $('#mask').css('display', 'none');
    $('#mydialog #dialog').fadeOut('fast', function(){ $(this).remove() });
    this.procesando_fin();
},
center: function(){
    if($('#mydialog #dialog').height() > $(window).height()-60)
        $('#mydialog #dialog').css({'position':'absolute', 'top':20});
    else
        $('#mydialog #dialog').css('top', $(window).height()/2-$('#mydialog #dialog').height()/2);
    $('#mydialog #dialog').css('left', $(window).width()/2-$('#mydialog #dialog').width()/2);
},

title: function(title){
    $('#mydialog #title').html(title);
},
body: function(body, width, height){
    if(!width && (jQuery.browser.opera || (jQuery.browser.msie && jQuery.browser.version<7)))
        width = '400px';
    $('#mydialog #dialog').width(width?width:'').height(height?height:'');
    $('#mydialog #modalBody').html(body);
},
buttons: function(display_all, btn1_display, btn1_val, btn1_action, btn1_enabled, btn1_focus, btn2_display, btn2_val, btn2_action, btn2_enabled, btn2_focus){
    if(!display_all){
        $('#mydialog #buttons').css('display', 'none').html('');
        return;
    }

    if(btn1_action=='close')
        btn1_action='mydialog.close()';
    if(btn2_action=='close' || !btn2_val)
        btn2_action='mydialog.close()';
    if(!btn2_val){
        btn2_val = 'Cancelar';
        btn2_enabled = true;
    }

    var html = '';
    if(btn1_display)
        html += '<input type="button" class="Boton BtnBlue'+(btn1_enabled?'':' disabled')+'" style="display:'+(btn1_display?'inline-block':'none')+'"'+(btn1_display?' value="'+btn1_val+'"':'')+(btn1_display?' onclick="'+btn1_action+'"':'')+(btn1_enabled?'':' disabled')+' />';
    if(btn2_display)
        html += ' <input type="button" class="Boton BntRed'+(btn1_enabled?'':' disabled')+'" style="display:'+(btn2_display?'inline-block':'none')+'"'+(btn2_display?' value="'+btn2_val+'"':'')+(btn2_display?' onclick="'+btn2_action+'"':'')+(btn2_enabled?'':' disabled')+' />';
    $('#mydialog #buttons').html(html).css('display', 'inline-block');

    if(btn1_focus)
        $('#mydialog #buttons .mBtn.btnOk').focus();
    else if(btn2_focus)
        $('#mydialog #buttons .mBtn.btnCancel').focus();
},
buttons_enabled: function(btn1_enabled, btn2_enabled){
    if($('#mydialog #buttons .Boton.Small.BtnBlue'))
        if(btn1_enabled)
            $('#mydialog #buttons .Boton.BtnBlue').removeClass('disabled').removeAttr('disabled');
        else
            $('#mydialog #buttons .Boton.BtnBlue').addClass('disabled').attr('disabled', 'disabled');

    if($('#mydialog #buttons .Boton.BtnRed'))
        if(btn2_enabled)
            $('#mydialog #buttons .mBtn.btnCancel').removeClass('disabled').removeAttr('disabled');
        else
            $('#mydialog #buttons .Boton.BtnRed').addClass('disabled').attr('disabled', 'disabled');
},
alert: function(title, body, reload){
    this.show();
    this.title(title);
    this.body(body);
    this.buttons(true, true, 'Aceptar', 'mydialog.close();' + (reload ? 'location.reload();' : 'close'), true, true, false);
    this.center();
},
error_500: function(fun_reintentar){
    setTimeout(function(){
        mydialog.procesando_fin();
        mydialog.show();
        mydialog.title('Error detectado!');
        mydialog.body(lang['error procesar']);
        mydialog.buttons(true, true, 'Reintentar', 'mydialog.close();'+fun_reintentar, true, true, true, 'Cancelar', 'close', true, false);
        mydialog.center();
    }, 200);
},
procesando_inicio: function(value, title){
    if(!this.is_show){
        this.show();
        this.title(title);
        this.body('');
        this.buttons(false, false);
        this.center();
    }
    $('#mydialog #procesando #mensaje').html('<br /><img src="/Themes/default/loading.gif" />');
    $('#mydialog #procesando').fadeIn('fast');
},
procesando_fin: function(){
    $('#mydialog #procesando').fadeOut('fast');
}

};

luego le das a guardar como escribes por ejemplo: mydialog es importante despues de mydialog o lo que pusieron ustedes ponen a la derecha ".js"

luego van a su web y pegan donde quieran esto, a se me olvidaba suben el archivo js que creamos en donde quieran en su web,
codigo:
Código:
<script type="text/javascript" src="http://direccion del archivo/carpeta si pusieron o no/mydialog o como pusieron.js"></script>

ahora creamos basicamente lo mismo pero este es css

abrimos bloc de notas denuevo, y adentro ponemos:
Código:
/* Botones */
.Boton {
    background-image:url('images/botones-bg.png');
    background-color:transparent;
    border-style:solid;
    border-width:1px;
    display:-moz-inline-box;
    display:inline-block;
    outline: none;
    vertical-align:bottom;
    cursor:pointer;
    font-size:13px;
    font-weight:bold;
    line-height:14px;
    *line-height:13px;
    margin:0;
    overflow:visible;
    *padding-bottom:1px;
    width:auto;
    padding:4px 7px 5px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.Boton.Small {padding:3px 5px;}
.Boton.Big {padding:9px 13px 10px;}

.Boton:hover{}
.Boton:active {text-decoration:none;}
.Boton:active {
    -moz-box-shadow:0 1px 0 rgba(0,0,0,.05);
    -webkit-box-shadow:0 1px 0 rgba(0,0,0,.05);
    box-shadow:0 1px 0 rgba(0,0,0,.05);
}
/* Gris */
.Boton.BtnGray {
    background-color:#eee;
    border-color:#999 #999 #888;
    color:#333;
    -moz-box-shadow:0 1px 0 #CCCCCC;
    -webkit-box-shadow:0 1px 0 #CCCCCC;
    box-shadow:0 1px 0 #CCCCCC;
}
.Boton.BtnGray:active {
    background-color:#ddd;
    background-image:none;
    border-color:#999;
}
/* Azul */
.Boton.BtnBlue {
    background-color:#5b74a8;
    background-position:0 -48px;
    border-color:#29447e #29447e #1a356e;
    color:#fff;
    -moz-box-shadow:0 1px 0 #CCCCCC;
    -webkit-box-shadow:0 1px 0 #CCCCCC;
    box-shadow:0 1px 0 #CCCCCC;
}
.Boton.BtnBlue:active {
    background-color:#4f6aa3;
    background-image:none;
    border-color:#29447e;
}
/* Verde */
.Boton.BtnGreen {
    background-color:#69a74e;
    background-position:0 -96px;
    color:#FFFFFF;
    border-color:#3B6E22 #3B6E22 #2C5A15;
    -moz-box-shadow:0 1px 0 #CCCCCC;
    -webkit-box-shadow:0 1px 0 #CCCCCC;
    box-shadow:0 1px 0 #CCCCCC;
}
.Boton.BtnGreen:active {
    background-color:#609946;
    background-image:none;
    border-color:#3b6e22;
}
/* Rojo */
.Boton.BtnRed {
    background-color:#69a74e;
    background-position:0 -144px;
    color:#FFFFFF;
    border-color:#6E2226 #6E2226 #5A1519;
    -moz-box-shadow:0 1px 0 #CCCCCC;
    -webkit-box-shadow:0 1px 0 #CCCCCC;
    box-shadow:0 1px 0 #CCCCCC;
}
.Boton.BtnRed:active {
    background-color:#994649;
    background-image:none;
    border-color:#6E2226;
}
/* Rojo */
.Boton.BtnBrown {
    background-color:#69a74e;
    background-position:0 -192px;
    color:#FFFFFF;
    border-color:#6B5244 #6B5244 #5A4437;
    -moz-box-shadow:0 1px 0 #CCCCCC;
    -webkit-box-shadow:0 1px 0 #CCCCCC;
    box-shadow:0 1px 0 #CCCCCC;
}
.Boton.BtnBrown:active {
    background-color:#917767;
    background-image:none;
    border-color:#6B5244;
}
/* Violeta */
.Boton.BtnPurple {
    background-color:#69a74e;
    background-position:0 -240px;
    color:#FFFFFF;
    border-color:#55226E #55226E #43155A;
    -moz-box-shadow:0 1px 0 #CCCCCC;
    -webkit-box-shadow:0 1px 0 #CCCCCC;
    box-shadow:0 1px 0 #CCCCCC;
}
.Boton.BtnPurple:active {
    background-color:#7F4699;
    background-image:none;
    border-color:#55226E;
}
/* Naranja */
.Boton.BtnOrange {
    background-color:#69a74e;
    background-position:0 -288px;
    color:#FFFFFF;
    border-color:#906000 #906000 #825701;
    -moz-box-shadow:0 1px 0 #CCCCCC;
    -webkit-box-shadow:0 1px 0 #CCCCCC;
    box-shadow:0 1px 0 #CCCCCC;
}
.Boton.BtnOrange:active {
    background-color:#C4901C;
    background-image:none;
    border-color:#906000;
}

    div.form-container { padding: 0 10px;}

    p.legend { margin-bottom: 1em; }
    p.legend em { color: #C00; font-style: normal; }

    div.errors { margin: 0 0 10px 0; padding: 5px 10px; border: #FC6 1px solid; background-color: #FFC; }
    div.errors p { margin: 0; }
    div.errors p em { color: #C00; font-style: normal; font-weight: bold; }

    div.form-container form p { margin: 0; }
    div.form-container form p.note { margin-left: 170px; font-size: 90%; color: #333; }
    div.form-container form legend { font-weight: bold; color: #666; }
    div.form-container form  div.data { clear:both; padding: 0.25em 0;margin-top: 5px; clear:both;}
    div.form-container form  div.dataL { padding: 0.25em 0;margin-top: 5px; width: 48%;float:left;}
    div.form-container form  div.dataR { padding: 0.25em 0;margin-top: 5px; width: 48%;float:right;}
    .c_input, .c_input_desc { margin-top: 5px;padding:4px; width: 95%; background: #FFF;}
  div.form-container select { margin-top:5px; }
    div.form-container form  div.postLabel { padding: 5px 0 0 0; display:block; }
    
    div.form-container label, div.form-container span.label { font-weight: bold;margin-right: 10px; font-size: 12px;padding-right: 10px; display: block;  text-align: left; position: relative; }
    div.form-container label.error,
    div.form-container span.error { color: #C00; }
    div.form-container label em,
    div.form-container span.label em { position: absolute; right: 0; font-size: 120%; font-style: normal; color: #C00; }
    div.form-container input.error { border-color: #C00; background-color: #FEF; }
    div.form-container div.controlset label,
    div.form-container div.controlset input { display: inline; float: none; }
    div.form-container div.controlset div { margin-left: 170px; }
    div.form-container div.buttonrow { margin-left: 180px; }

.redBox {
    background:#FFEBE8;
    border-top:1px solid #DD3C10;
    border-bottom:1px solid #DD3C10;
    padding:12px;
    font-weight:bold;
    text-align:center;
}

/* MyDialog */
#mask {
    position:absolute;
    z-index:500;
    left:0px;
    top:0px;
    background: #111;
    opacity: 0.3;
    filter: alpha(opacity=30);
}

#mydialog #cuerpo {
    position: relative;
}

#mydialog #procesando {
    display: none;
    background: white;
    opacity: 0.9;
    z-index:1000;
    position:absolute;
    height: 100%;
    width: 100%;
}
#mydialog #procesando #mensaje {
    color:#222;
    position:relative;
    height: 100%;
}

#mydialog #procesando #mensaje img {
    left:44%;
    margin-right:10px;
    position:absolute;
    top:29%;
    vertical-align:middle;
    width:25px;
}

#mydialog #procesando #mensaje div {
    font-size:20px;
    font-weight:bold;
    margin-left:-25px;
    margin-top:25px;
    text-align:center;
}


#mydialog #buttons {
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
}

    #mydialog #dialog {
        text-align: left;
        border:5px solid #DCDAD1;
        display:none;
        z-index:1000;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0 0 25px #787878;
        -webkit-box-shadow: 0 0 25px #787878;
        box-shadow: 0 0 25px #787878;
    }

    #mydialog #cuerpo {
        background: #F4F1E9;
        border-left:1px solid #909090;
        border-right:1px solid #909090;
        border-bottom:1px solid #909090;
    }
    
    
    #mydialog #dialog #title {
        background:-moz-linear-gradient(center top , #FEFFFE, #CDCDCD) repeat scroll 0 0 transparent;
        background:-webkit-gradient(linear, center top, center bottom, from(#FEFFFE), to(#CDCDCD));
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEFFFE', endColorstr='#CDCDCD');
        -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEFFFE', endColorstr='#CDCDCD');
        text-align: left;
        color:#616161;
        text-shadow:0px 1px 0px #FFF;
        font-size: 14px;
        font-weight: bold;
        padding:8px;
        border:1px solid #909090;
    }

#modalBody {
    text-align:center;
    font-size:13px;
    padding: 20px 5px;
}
#modalBody .modalForm.here {
    background: #ffffcc;
    border: 1px solid #bebe33;
}

#modalBody input {
    margin: 0 0 0 0;
    vertical-align: middle;
}
.close_dialog {
    position: absolute;
    right:8px;
    top:8px;
    cursor: pointer;
}

bien entonces le damos a guardar como y le ponemos un nombre despues del nombre seleccionado pones .css ejemplo: "nombreseleccionado.css"

bien ahora para que salga el mydialog buscamos en el index de su web o la pagina principal buscamos:
Código:
<body>
y remplazamos por esto:}
Código:
<body><div id="mask"></div>
<div id="mydialog"></div>

bien ahora como saldria eso?
facil
en su web en cualquier parte ponen:

Código:
<script>
function nombrefuncion(aceptar){
  
   if(!aceptar){
         mydialog.mask_close = false;
         mydialog.show();
         mydialog.title(\'titulo de funcion\');
         mydialog.body(\'cuerpo de funcion esto saldra en la ventana abajo del titulo\');
         mydialog.buttons(true, true, \'Si opciones\', \'nombrefuncion(1)\', true, false, true, \'No opciones\', \'close\', true, true);
         mydialog.center();
         return;
   }else if(aceptar==1){
         mydialog.mask_close = false;
         mydialog.show();
         mydialog.title(\'Algo mas?\');
         mydialog.body(\' es lo mismo de arriba\');
         mydialog.buttons(true, true, \'lo mismo de arriba\', \'nombrefuncion(2)\', true, false, true, \'lo mismo de arriba\', \'close\', true, true);
         mydialog.center();
         return;
   }
  
else{
  
   document.location.href=\'http://direccion/carpeta/hola.html, '\';
  
  
   }


      
}
</script>

ahora para hacer la funcion en un link ponemos esto
<a href="" onclick="nombrefuncion(); return false;">hola ver mydialog</a>
algo parecido cambian, nombre funcion por la funcion que pusieron, cualquier cosa ayuda si no saben como me dicen y listo salu2
#2
Vaya, está muy bien. Gracias por compartir el código.

Ahí te mando un "thankyou" Guiño
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  ¿Debería "firmar" mis webs? bseca 13 508 31-05-2015, 10:42 PM
Último mensaje: mispracticas2009
  palabras clave para webs canpios 1 192 25-03-2015, 04:25 AM
Último mensaje: garcon
  Pantalla de Cargando... Mientras tu web se carga Spastox 6 1,040 03-05-2014, 11:03 PM
Último mensaje: Wallíd
  Algunos PSDs para sus webs lsdr 2 399 25-02-2014, 06:27 PM
Último mensaje: ariel
  Multiplicar Ganancias con Webs Acortadoras, + Bot Truco Sin ser Baneado lucy 11 1,840 05-09-2013, 02:57 AM
Último mensaje: DarkMaster
Estrella 5 Webs/Tips que de seguro te ayudan! Jona 3 470 14-06-2013, 07:22 PM
Último mensaje: FullPirata
Información Codigos HTML Para Webs TripleZ 10 1,012 13-04-2013, 11:22 PM
Último mensaje: Tilinga
  javascript para webs basic Eclipze 8 869 18-12-2012, 01:45 AM
Último mensaje: BrayanFG
  Alguna vez han buscado iconos para sus webs? Razor007 12 1,037 11-11-2012, 01:35 AM
Último mensaje: Dark_Assessin
  Craer varias Webs/Secciones en un sólo Host fullfta 9 753 16-08-2012, 06:28 PM
Último mensaje: jrom4



Usuarios navegando en este tema: 1 invitado(s)