elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Únete al Grupo Steam elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Problemas con modal
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Problemas con modal  (Leído 5,109 veces)
Ali Baba


Desconectado Desconectado

Mensajes: 310


Ver Perfil WWW
Problemas con modal
« en: 7 Febrero 2018, 03:00 am »

Estoy intentando copiar este ejemplo: https://mdbootstrap.com/javascript/modals/ en mi proyecto con pug, osea intento imitar el modal asi que lo he copiado y pegado, pero resulta que el modal me queda debaj, en vez de salirme cuando toque el boton, aca mi pug:

Código:
doctype html
html
head
title=title
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
script(src='https://code.jquery.com/jquery-3.2.1.slim.min.js', integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN', crossorigin='anonymous')
link(href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css', rel='stylesheet')
link(href='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.5/css/mdb.min.css', rel='stylesheet')
link(href='css/style.css', rel='stylesheet')
script(src='js/main.js')
body
block content

Código:
extends layout
block content
.view.hm-black-light
.full-bg-img.flex-center
ul.animated.fadeInUp
li
h1.display-3.b-4.font-bold Grapict
li
h3.mb-5 See the posts you really want to see
li
button.btn.btn-primary(type='button', data-toggle='modal', data-target='#register') Launch demo modal

#register.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true')
.modal-dialog.modal-side.modal-top-right(role='document')
.modal-content
.modal-header
h5#exampleModalLabel.modal-title Modal title
button.close(type='button', data-dismiss='modal', aria-label='Close')
span(aria-hidden='true') ×
.modal-body
| ...

script(src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js', integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl', crossorigin='anonymous')
script(src='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.5/js/mdb.min.js')

todo bien, peor el modal me sale debajo, no deberia ser asi, deberia de salirme cuando le de clic al boton.

tengo el codigo aca corriendo: https://afternoon-temple-14236.herokuapp.com/


« Última modificación: 7 Febrero 2018, 03:04 am por magodiesan » En línea

srWhiteSkull


Desconectado Desconectado

Mensajes: 444



Ver Perfil WWW
Re: Problemas con modal
« Respuesta #1 en: 8 Febrero 2018, 01:38 am »

Imitar ese efecto es bastante sencillo, no es necesario que picotees código por ahí. Coges la plantilla html que quieres que se muestre así, por ejemplo un formulario, y le pones con posición absoluta. Para que quede bonito o simplemente para conseguir que se inhabilite el fondo o lo que esté detrás puedes usar un div de color negro con un alpha 0.5 del tamaño de la pantalla y lo superpones, y luego encima de eso el formulario aunque puede ser indiferente si usas el z-index.

https://www.w3schools.com/css/css_positioning.asp

Si quieres una página con buen rendimiento intenta prescindir en lo que puedas de bootstrap o jquery. Las esquinas redondeadas son fáciles de hacer y las animaciones con buena maña y práctica puedes conseguirla con CSS.


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Fomulario Modal
Programación Visual Basic
TheGhost(Z) 9 3,981 Último mensaje 30 Agosto 2010, 19:50 pm
por goldarg
Problema con ventana modal
Desarrollo Web
Grave 2 3,720 Último mensaje 21 Mayo 2014, 18:46 pm
por Grave
variable php en ventana modal
Desarrollo Web
Yorshdelaselva 1 5,353 Último mensaje 22 Julio 2016, 18:55 pm
por Adrialmend
Problemas con modal bootstrap, javascript y php.
Desarrollo Web
SebastianJava 3 3,878 Último mensaje 6 Agosto 2016, 02:24 am
por SebastianJava
ajax update modal
PHP
asdexiva 1 2,227 Último mensaje 3 Septiembre 2019, 10:06 am
por Agente Naranja
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines