Resulta que estoy creando un website y necesito que cuando le de clic a un botón salga el modal, pero lo que sucede es que el modal me sale debajo en la pantalla, cuando solo me debería de salir si le doy clic al botón.
Pues bien, estoy creando el proyecto con pug y css, entonces tengo el index:
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
ese viene siendo un layaout con un bloque de codigo general que uso y luego viene el index como tal:
.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(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')
y acá mi css:
html,
body,
.view {
height: 100%;
}
/* Navigation*/
.navbar {
background-color: transparent;
}
.scrolling-navbar {
-webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
}
.top-nav-collapse {
background-color: #2b3b68;
}
footer.page-footer {
background-color: #2b3b68;
margin-top: -1px;
}
@media only screen and (max-width: 768px) {
.navbar {
background-color: #2b3b68;
}
}
@media only screen and (max-width: 768px) {
.display-3 {
font-size: 3rem;
margin-top: 4rem;
}
h3 {
font-size: 1.3rem;
}
}
.navbar .btn-group .dropdown-menu a:hover {
color: #000 !important;
}
.navbar .btn-group .dropdown-menu a:active {
color: #fff !important;
}
/*Call to action*/
.flex-center {
color: #fff;
}
.view {
background: url("/images/background.jpg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Cabe destacar que estoy usando Material Design for Bootstrap. Y acá está el ejemplo del Modal, que lo que hice fue copiarlo y pegarlo: https://mdbootstrap.com/javascript/modals/
Espero me puedan ayudar y me digan, por qué el modal me sale debajo, cuando solo debería de salirme cuando toco el botón.