Autor Tema: [Soporte] Colocar Modals en Html  (Leído 687 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Ryuno
  • [L0] Ladrón de espacio en la BD
  • Mensajes: 16
    Ingreso: Noviembre de 2016
  • dz
  • Bienvenidos/as a Bomber Code
    • Ver Perfil
[Soporte] Colocar Modals en Html
« on: 13 Noviembre de 2016, 10:47 am »
Hola Amigos que pena molestar :v  les iva a preguntar si alguien sabe como colocar un login regitrer y login modals  es que ando haciendo un ripeo de una web y pues la ando programando en php y todo eso

Web que ando haciendo una replica

http://www.legend.mu/

Avanze mio :V ahi dejo mi web

http://mu-legend.tk/

Desconectado Rock Lee

  • Administrador
  • *
  • Mensajes: 1118
    Ingreso: Enero de 2014
  • Sexo: Masculino
  • ar
  • Digitalizando tu Mundo
    • Ver Perfil
    • La nueva era del conocimiento
Re:[Soporte] Colocar Modals en Html
« Respuesta #1 on: 13 Noviembre de 2016, 11:15 am »
No soy mucho de copiar, posiblemente basarme, pero no es muy complicado aplicarlo es usar el HTML5 junto a Javascript para pueda funcionar tienes mirar bien la ID le estas dando para aplicar lo que deseas ;)


Saludos Familia!

Desconectado Ryuno
  • [L0] Ladrón de espacio en la BD
  • Mensajes: 16
    Ingreso: Noviembre de 2016
  • dz
  • Bienvenidos/as a Bomber Code
    • Ver Perfil
Re:[Soporte] Colocar Modals en Html
« Respuesta #2 on: 13 Noviembre de 2016, 11:18 am »
depronto me hize entender mal copiar no Basarme al sistema que manejan hablo si en tiempo que intente de hacer el modal no pude y si segui tal cual pero realmente no pude no me pido que me hagan esto porque mi interes es aprender para luego aplicarlo en otras web que haga yo.

me poder dar una mano de como hago.

Tema unido automáticamente » 13 Noviembre de 2016, 11:21 am
@roock lee  no ahi boton de editar mensajes xd ahi paso el codigo de como tengo armaado el modals

Código: (html5) [Seleccionar]
<!-- Modal -->
   <div class="modal fade" id="login-modal"> 
       <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title">Login User</h4>
               </div>
               <div class="loginForm">
                  <div class="modal-body">

                     <div class="form-group">
                        <div class="input-group">
                           <div class="input-group-addon">
                              <i class="fa fa-user"></i>
                           </div>
                           <input class="form-control" type="text" id="login-username" maxlength="10" placeholder="Username">
                        </div>
                     </div>
                     <div class="form-group">
                        <div class="input-group">
                           <div class="input-group-addon">
                              <i class="fa fa-lock"></i>
                           </div>
                           <input class="form-control" type="password" id="login-password" placeholder="Password">
                        </div>
                     </div>

                     <div class="clearfix loginResult">
                     </div>
                  </div>

                  <div class="modal-footer">
                     <p><a href="Recuperarpass.php" type="button" class="pull-left btn btn-warning recoveryButton">Recuperar Password?</a>
                     <a href="#"type="button" class="pull-right btn btn-primary loginButton" data-loading-text="Loading...">Login</a></p>
                  </div>
               </div>           

               <div class="recoveryForm">
                  <div class="modal-body">
                     <div class="form-group">
                        <div class="input-group">
                           <div class="input-group-addon">
                              <i class="fa fa-user"></i>
                           </div>
                           <input class="form-control" type="text" id="recovery-username" maxlength="10" placeholder="Username">
                        </div>
                     </div>
                     <div class="clearfix recoveryResult"></div>
                  </div>

                  <div class="modal-footer">
                     <p><a href="#" type="button" class="pull-left btn btn-primary backLogin">Login</a>
                        <a href="#" type="button" class="pull-right btn btn-warning sendPassword">Enviar Password</a></p>
                  </div>
                                       
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>

Editado para mostrar mejor el código HTML y ver el problema
« Última Modificación: 13 Noviembre de 2016, 11:30 am por Rock Lee »

Desconectado Rock Lee

  • Administrador
  • *
  • Mensajes: 1118
    Ingreso: Enero de 2014
  • Sexo: Masculino
  • ar
  • Digitalizando tu Mundo
    • Ver Perfil
    • La nueva era del conocimiento
Re:[Soporte] Colocar Modals en Html
« Respuesta #3 on: 13 Noviembre de 2016, 11:26 am »
Tienes poder ver el botón dice "modificar" arriba lado derecho de tu mensaje... algo como y ahora respecto al tema no soy mucho de copiar, posiblemente basarme, pero no es muy complicado aplicarlo es usar el HTML5 junto a Javascript para pueda funcionar tienes mirar bien la ID le estas dando para aplicar lo que deseas ;) por ejemplo al final de tu al final del body pones:
Código: (html5) [Seleccionar]
<div id=”Ventana” style=”position: fixed; width: 250px; height: 150px; top: 0; left: 0; font-size: 14px; font-weight: normal; border: #FF0000 3px dotted; background-color: #FFFFFF; color: #0000FF; display:none;”>
Aquí pones lo que necesitas
</div>
Luego debes crear el script para mostrar dicha ventana, ya que con "display:none" estamos diciendo no muestre dicho elemento (aplique el css en el html directo para no complicarla mucho pero es mejor hacerlo desde la hoja de estilo) como:
Código: (javascript) [Seleccionar]
function mostrarVentana()
{
    var ventana = document.getElementById(‘Ventana’);
    ventana.style.marginTop = “100px”;
    ventana.style.left = ((document.body.clientWidth-350) / 2) +  “px”;
    ventana.style.display = ‘block’;
}
Y agregando ademas:
Código: (javascript) [Seleccionar]
function ocultarVentana()
{
    var ventana = document.getElementById(‘miVentana’);
    ventana.style.display = ‘none’;
}

Ya esta función obtiene una referencia al contenedor a través de su id, y lo hace invisible. Y debería estar funcionando sin mayores problemas :D


Saludos Familia!

Agrego: Ahora mirando mejor el código puede ser te falto la parte de javascript y la forma de ubicar el HTML, trato hacer códigos de 0 por eso mismo por al momento de copiar y querer hacer cambios muchas veces se anida para hacerlo mas rapido/quede bien... pero tocando algo edita todo los lugares tengan relación directa generando muchos dolores de cabeza por eso mejor ahorrárselos haciéndolo a mano. Igualmente como te comente anteriormente mira bien la parte de "ID" para aplicar correctamente el cambio y de échale un ojo al css también ;)
« Última Modificación: 13 Noviembre de 2016, 11:34 am por Rock Lee »

Desconectado Ryuno
  • [L0] Ladrón de espacio en la BD
  • Mensajes: 16
    Ingreso: Noviembre de 2016
  • dz
  • Bienvenidos/as a Bomber Code
    • Ver Perfil
Re:[Soporte] Colocar Modals en Html
« Respuesta #4 on: 13 Noviembre de 2016, 11:34 am »
Todo lo que me dijiste va en la en el index.php ? mi idea es que ese modal tome referencia de algun archivo php



Desconectado Rock Lee

  • Administrador
  • *
  • Mensajes: 1118
    Ingreso: Enero de 2014
  • Sexo: Masculino
  • ar
  • Digitalizando tu Mundo
    • Ver Perfil
    • La nueva era del conocimiento
Re:[Soporte] Colocar Modals en Html
« Respuesta #5 on: 13 Noviembre de 2016, 11:37 am »
La idea es trabajarlo todo en el mismo archivo mezclando varios tipos de lenguajes y formas, por experiencia propia el orden es vital ya que depende si funciona o no.... Por ejemplo una vez me paso si el <div> no estaba al final dejaba mi web en blanco, era un cosa simple imagina meter mucho mas contenido. No estoy seguro haga referencia algún .php hay leer bien si es posible y ademas como esta permitido ya que para diseñar hay ciertas reglas/orden a seguir para funcione correctamente!


Saludos Familia!

Agrego: Que raro tendrías poder modificarlo ya que ocurrió dentro de las 12 horas, luego no deja editarlo ya que ocurrió ciertos incidentes que llevo a tomar la decisión.
« Última Modificación: 13 Noviembre de 2016, 11:42 am por Rock Lee »

Desconectado Ryuno
  • [L0] Ladrón de espacio en la BD
  • Mensajes: 16
    Ingreso: Noviembre de 2016
  • dz
  • Bienvenidos/as a Bomber Code
    • Ver Perfil
Re:[Soporte] Colocar Modals en Html
« Respuesta #6 on: 13 Noviembre de 2016, 11:41 am »
al igual no pasa nada la idea es experimentar y de ello se aprende

El boton del login lo hize yo . pero nose porque no abre nada.  de lo que tengo entendido   data-target="#modal-content">   data target hace llamado al modals pero en este caso  no funciona

Cuando me dijiste en el body cual de todos ? :v


Código: (html5) [Seleccionar]
<li><a href="#" class="page-scroll" data-toggle="modal" data-target="#modal-content">Login</a></li>


<!-- Trigger the modal with a button -->

<!-- Modal -->
   <div class="modal fade" id="login-modal"> 
       <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title">Login User</h4>
               </div>
               <div class="loginForm">
               
</div> 
     <div class="modal-body">
<div id="Ventana" style="position: fixed; width: 250px; height: 150px; top: 0; left: 0; font-size: 14px; font-weight: normal; border: #FF0000 3px dotted; background-color: #FFFFFF; color: #0000FF; display:none;">
 LO COLOQUE ACA

                     <div class="form-group">
                        <div class="input-group">
                           <div class="input-group-addon">
                              <i class="fa fa-user"></i>
                           </div>
                           <input class="form-control" type="text" id="login-username" maxlength="10" placeholder="Username">
                        </div>
                     </div>
                     <div class="form-group">
                        <div class="input-group">
                           <div class="input-group-addon">
                              <i class="fa fa-lock"></i>
                           </div>
                           <input class="form-control" type="password" id="login-password" placeholder="Password">
                        </div>
                     </div>

                     <div class="clearfix loginResult">
                     </div>
                  </div>

                  <div class="modal-footer">
                     <p><a href="Recuperarpass.php" type="button" class="pull-left btn btn-warning recoveryButton">Recuperar Password?</a>
                     <a href="#"type="button" class="pull-right btn btn-primary loginButton" data-loading-text="Loading...">Login</a></p>
                  </div>
               </div>           

               <div class="recoveryForm">
                  <div class="modal-body">
                     <div class="form-group">
                        <div class="input-group">
                           <div class="input-group-addon">
                              <i class="fa fa-user"></i>
                           </div>
                           <input class="form-control" type="text" id="recovery-username" maxlength="10" placeholder="Username">
                        </div>
                     </div>
                     <div class="clearfix recoveryResult"></div>
                  </div>

                  <div class="modal-footer">
                     <p><a href="#" type="button" class="pull-left btn btn-primary backLogin">Login</a>
                        <a href="#" type="button" class="pull-right btn btn-warning sendPassword">Enviar Password</a></p>
                  </div>
                                       
                </ul>
            </div>

Editado para mostrar mejor el código HTML
« Última Modificación: 13 Noviembre de 2016, 11:50 am por Rock Lee »

Desconectado Rock Lee

  • Administrador
  • *
  • Mensajes: 1118
    Ingreso: Enero de 2014
  • Sexo: Masculino
  • ar
  • Digitalizando tu Mundo
    • Ver Perfil
    • La nueva era del conocimiento
Re:[Soporte] Colocar Modals en Html
« Respuesta #7 on: 13 Noviembre de 2016, 11:45 am »
Te recomiendo empieces por ejemplos simples para entender la mecánica básica y luego darle duro a mas complejas... el error esta que en "<a href="#" class="page-scroll" data-toggle="modal" data-target="#modal-content">Login</a>" esta haciendo lo de modal si pero hacia la nada, osea, en "href=" debe apuntar al archivo debe buscar la informacion y al no tenerla es claro no funcione.
Y un consejo puedo darte es usar algún editor de texto [:-XNotepad++:-X] te de color para poder darte mas rápido el error o te pierdas fácilmente :) ademas des una hojeada a Diseño Web by Alan que te explica los temas fácilmente, como que el body hay uno solo :P


Saludos Familia!
« Última Modificación: 13 Noviembre de 2016, 11:55 am por Rock Lee »

Desconectado Ryuno
  • [L0] Ladrón de espacio en la BD
  • Mensajes: 16
    Ingreso: Noviembre de 2016
  • dz
  • Bienvenidos/as a Bomber Code
    • Ver Perfil
Re:[Soporte] Colocar Modals en Html
« Respuesta #8 on: 13 Noviembre de 2016, 11:54 am »
si te habia enviado el que no era pero el que tengo, uso sublime text.

"<a href="loginmenu.php" class="page-scroll" data-toggle="modal" data-target="#modal-content">Login</a>

asi lo tengo .

Desconectado Rock Lee

  • Administrador
  • *
  • Mensajes: 1118
    Ingreso: Enero de 2014
  • Sexo: Masculino
  • ar
  • Digitalizando tu Mundo
    • Ver Perfil
    • La nueva era del conocimiento
Re:[Soporte] Colocar Modals en Html
« Respuesta #9 on: 13 Noviembre de 2016, 11:58 am »
si te habia enviado el que no era pero el que tengo, uso sublime text.

"<a href="loginmenu.php" class="page-scroll" data-toggle="modal" data-target="#modal-content">Login</a>

asi lo tengo .

Genial entonces, bueno hace referencia a "loginmenu.php" pero suponiendo el index.php esta al mismo nivel que el php esta solicitando... Por ejemplo tengo "<a href="contacto.php">Contacto</a>" en mi host y ese href tiene hacer referencia a http://www.bombercode.net/contacto.php por lo cual si tienes solo el html pero no el php no va a funcionar nunca [No se si logro explicarme del todo a lo que me refiero].


Saludos Familia!

Desconectado Ryuno
  • [L0] Ladrón de espacio en la BD
  • Mensajes: 16
    Ingreso: Noviembre de 2016
  • dz
  • Bienvenidos/as a Bomber Code
    • Ver Perfil
Re:[Soporte] Colocar Modals en Html
« Respuesta #10 on: 13 Noviembre de 2016, 12:03 pm »
lo que me tratas de decir es que toca hacer el login.php ?

Desconectado Rock Lee

  • Administrador
  • *
  • Mensajes: 1118
    Ingreso: Enero de 2014
  • Sexo: Masculino
  • ar
  • Digitalizando tu Mundo
    • Ver Perfil
    • La nueva era del conocimiento
Re:[Soporte] Colocar Modals en Html
« Respuesta #11 on: 13 Noviembre de 2016, 12:07 pm »
lo que me tratas de decir es que toca hacer el login.php ?

Basicamente si ya que es la parte te falta o a menos uses el login de esa web es decir http://www.legend.mu/loginmenu.php pero no creo te lo deje usar o ver... Por eso copiar aveces al faltar la parte de php hace el trabajo un poco mas complejo.


Saludos Familia!