Skip to main content
1 de 2

¿Por qué me sale el modal debajo?

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.