1

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.

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

1
  • En realidad no esta saliendo debajo de la pantalla, tienes el codigo... ese realmente alli escrito... tu modal lo estas declarando vacio... porque en cuanto lo delcaras cierras el div. Commented el 7 feb. 2018 a las 2:56

2 respuestas 2

4

Dejame analizar el fuente....

Ya descubri el detalle, tenias un </div> despues del modal principal, osea que lo estabas creando tecnicamente VACIO, prueba el codigo y revisa la linea que te marque con el comentario.

Aparte de eso tenias un error con el script, estaba tronando algo, alguna de las dependencias del JQUERY asi que mejor que uses los .js del ejemplo y en ese mismo orden para que no tengas inconvenientes.

Saludos.

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.compatibility.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.5/js/mdb.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <style></style>
    <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">

    <div class="view hm-black-light">
    <div class="full-bg-img flex-center">
    <ul class="animated fadeInUp">
    <li><h1 class="display-3 b-4 font-bold">Grapict</h1></li>
    <li><h3 class="mb-5">See the posts you really want to see</h3></li>
    <li><button class="btn btn-primary" type="button" data-toggle="modal" data-target="#register">Launch demo modal</button></li></ul>
    </div>
    </div>
    <div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><!-- AQUI TENIAS UN /DIV ESO DESCOMPONIA EL MODAL, ESTABAS CREANDO UN MODAL TOTALMENTE VACIO POR ESO NO MOSTRABA NADA -->
    <div class="modal-dialog modal-side modal-top-right" role="document">
    <div class="modal-content"><div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">×</span></button></div>
    <div class="modal-body">...</div>
    </div>
    </div>
    </div>

4
  • 1
    Gracias, me sirve de mucho, eres mi heroína. Commented el 7 feb. 2018 a las 3:37
  • De nada :) excelente Commented el 7 feb. 2018 a las 6:04
  • intento agregarlo en un pagina de asp.net.¿ tengo que hacer algo diferente? ,porque ami me sale pegado en una orilla Commented el 8 feb. 2018 a las 17:22
  • No hay nada especial que hacer, el funcionamiento seria basicamente el mismo, podrias publicar tu codigo o compartirmelo?? tal vez las referencias o css que utilizas no sean los mismos. Publica tu pregunto con tu fuente para revisarlo. Commented el 9 feb. 2018 a las 17:44
1

Mira hice este ejemplo sencillo y rápido, no se si sea lo que buscas, chécalo y me dices si quieres.

Ejemplo Ventana

<body>
    <article>
         <h1> Contenido de la página </h1> <br/><br/>
        <h3> Información: </h3> <br/>
        La información es un conjunto organizado de datos procesados, que constituyen un mensaje que cambia el estado de conocimiento del sujeto o sistema que recibe dicho mensaje. Existen diversos enfoques para el estudio de la información:

        En biología, la información se considera como estímulo sensorial que afecta al comportamiento de los individuos.
        En computación y teoría de la información, como una medida de la complejidad de un conjunto de datos.
        En comunicación social y periodismo, como un conjunto de mensajes intercambiados por individuos de una sociedad con fines organizativos concretos.
        Los datos sensoriales una vez percibidos y procesados constituyen una información que cambia el estado de conocimiento, eso permite a los individuos o sistemas que poseen dicho estado nuevo de conocimiento tomar decisiones pertinentes acordes a dicho conocimiento.

        Desde el punto de vista de la ciencia de la computación, la información es un conocimiento explícito extraído por seres vivos o sistemas expertos como resultado de interacción con el entorno o percepciones sensibles del mismo entorno. En principio la información, a diferencia de los datos o las percepciones sensibles, tienen estructura útil que modificará las sucesivas interacciones del que posee dicha información con su entorno.
        <br/><br/><br/><br/>
        <h3> Más información: </h3> <br/>
        La información es un conjunto organizado de datos procesados, que constituyen un mensaje que cambia el estado de conocimiento del sujeto o sistema que recibe dicho mensaje. Existen diversos enfoques para el estudio de la información:

        En biología, la información se considera como estímulo sensorial que afecta al comportamiento de los individuos.
        En computación y teoría de la información, como una medida de la complejidad de un conjunto de datos.
        En comunicación social y periodismo, como un conjunto de mensajes intercambiados por individuos de una sociedad con fines organizativos concretos.
        Los datos sensoriales una vez percibidos y procesados constituyen una información que cambia el estado de conocimiento, eso permite a los individuos o sistemas que poseen dicho estado nuevo de conocimiento tomar decisiones pertinentes acordes a dicho conocimiento.

        Desde el punto de vista de la ciencia de la computación, la información es un conocimiento explícito extraído por seres vivos o sistemas expertos como resultado de interacción con el entorno o percepciones sensibles del mismo entorno. En principio la información, a diferencia de los datos o las percepciones sensibles, tienen estructura útil que modificará las sucesivas interacciones del que posee dicha información con su entorno.
    </article>

    <button id="Abrir"> Abrir </button>

    <div id="BgOpacity">
    </div>
    <div id="Ventana">
        <button id="Cerrar"> Cerrar </button>
    </div>

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        article{
            text-align: center;
            padding: 20px;
        }

        html, body, #BgOpacity{
            width: 100%;
            height: 100%;
        }

        #BgOpacity{
            position: absolute;
            top: 0;
            background: #333333;
            opacity: 0.8;
            filter: alpha(opacity = 80);
            display: none;
        }

        #Ventana{
            position: fixed;
            width: 800px;
            height: 580px;
            background: #C4C4C4;
            border: 2px solid #333333;
            left: 50%;
            margin-left: -402px;
            top: 50%;
            margin-top: -292px;
            display: none;
        }

        button{
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: #333333;
            border: none;
            padding: 8px;
            outline: none;
            cursor: pointer;
            color: #C4C4C4;
        }
    </style>

    <script>
        var Vent = document.getElementById("Ventana");
        var BgOpa = document.getElementById("BgOpacity");
        var ButtonAbr = document.getElementById("Abrir");
        var ButtonCer = document.getElementById("Cerrar");

        ButtonAbr.onmousedown = function(){
            Vent.style.display = "block"
            BgOpa.style.display = "block"
        }

        ButtonCer.onmousedown = function(){
            Vent.style.display = "none"
            BgOpa.style.display = "none"
        }
    </script>
</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.