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
  Pantalla Completa con Javascript cmascreativo.ml 1 36 02-10-2018, 03:14 PM
Último mensaje: easy english
  ¿Debería "firmar" mis webs? bseca 13 852 31-05-2015, 10:42 PM
Último mensaje: mispracticas2009
  palabras clave para webs canpios 1 312 25-03-2015, 04:25 AM
Último mensaje: garcon
  Pantalla de Cargando... Mientras tu web se carga Spastox 6 1,289 03-05-2014, 11:03 PM
Último mensaje: Wallíd
  Algunos PSDs para sus webs lsdr 2 511 25-02-2014, 06:27 PM
Último mensaje: ariel
  Multiplicar Ganancias con Webs Acortadoras, + Bot Truco Sin ser Baneado lucy 11 2,175 05-09-2013, 02:57 AM
Último mensaje: DarkMaster
Estrella 5 Webs/Tips que de seguro te ayudan! Jona 3 780 14-06-2013, 07:22 PM
Último mensaje: Jvh_22
Información Codigos HTML Para Webs TripleZ 10 1,294 13-04-2013, 11:22 PM
Último mensaje: Tilinga
  javascript para webs basic Eclipze 8 1,011 18-12-2012, 01:45 AM
Último mensaje: BrayanFG
  Alguna vez han buscado iconos para sus webs? Razor007 12 1,257 11-11-2012, 01:35 AM
Último mensaje: Dark_Assessin



Usuarios navegando en este tema: 1 invitado(s)