1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Solucionado Ventana modal responsive, scroll se come una parte

Tema en 'HTML y CSS' comenzado por victorcf999, 12 de Agosto de 2017.

Tags:
  1. victorcf999

    victorcf999 Nuevo Miembro

    Se incorporó:
    19 de Abril de 2017
    Mensajes:
    29
    Me gusta recibidos:
    4
    Puntos de trofeos:
    3
    Género:
    Hombre
    Buenas,

    Tengo una ventana modal la cual la estoy intentando hacer responsive.

    Es problema es el que podeis ver een la imagen adjunta. Tengo puesto un overflow-y:visible; el problema es que este se come un h2(Pedir Cita).

    Para ver todo el codigo meteros en la pagina web www.peluqueriarosafuentes.com aunque abajo pongo la parte del codigo relevante

    HTML:
    <div class="modal" id="modal_2">
            <div class="ventana" id="ventana_2">
              <p>  <h2>Pide cita</h2>
              <br>Para pedir cita llamanos en nuestro horario<br><br>Martes a Viernes<br>9:00-20:00<br><br>Sabados<br>9:00-14:30<br><br><h1><b>965 66 79 46</b></h1><br>Tambien puedes llamarnos <br>si tienes alguna pregunta<br></p>
                <span class="cerrar" id="cerrar_2">x</span>
                </div>
     
    Código (CSS):
    .modal{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,.7);
        display:none;
        z-index:19;
    }

    .ventana{
        position:absolute;
        background-color:rgba(255,255,255,.8);
        z-index:20;
        text-align: center;
        color:black;
    }
    #ventana_2{
        left:30%;
        width:40%;
        top:25%;
        height:50%;
        display:flex;
        flex-direction: column;
        overflow-y:visible;
        overflow-x: hidden;
        justify-content: center;
    }
    .ventana span{
        color:#fff;
        background-color:#000;
        padding:.2em .5em .3em .5em;
        font-family:Arial;
        font-weight:bold;
        border:2px solid #fff;
        border-radius:50%;
        position:absolute;
        top:-20px;
        right:-16px;
        cursor:pointer;
        z-index: 1000;
    }
    #ventana_2  span{
        top:10px;
        right:10px;
    }
    .ventana span:hover{
        background-color:#f56f3a;
    }
    @media(max-width:900px){

        footer{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .foot{
            text-align: center;
            padding: 0px 0px 25px 0px;
            height: auto;
            width: 100%;
        }
        .foot-1 a {
            padding-left: 5px;
            padding-right: 5px;
        }
        .foot-1{
            text-align: center;
            padding: 30px 0px 20px 0px;
            height: auto;
            width: 100%;
        }
        .section{
            padding: 25px 25px;
        }
        #ventana_1{
        height:80%;
        width:90%;
        top:10%;
        left:5%;
    }
        #ventana_2{
        left:10%;
        width:80%;
        top: 5%;
        height: 90%;
    }

    }

    Muchas gracias
     
  2. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.464
    Me gusta recibidos:
    674
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    yo te recomendaria que usaras mejor uno de los que ya estan creados Bootstrap o Semantic UI

    https://semantic-ui.com/modules/modal.html#full-screen

    HTML:
    <div class="ui fullscreen modal">
        <i class="close icon"></i>
        <div class="header">
          Update Your Settings
        </div>
        <div class="content">
          <div class="ui form">
            <h4 class="ui dividing header">Give us your feedback</h4>
            <div class="field">
              <label>Feedback</label>
              <textarea></textarea>
            </div>
            <div class="field">
              <div class="ui checkbox">
                <input type="checkbox" checked="checked" name="contact-me">
                <label>It's okay to contact me.</label>
              </div>
            </div>
          </div>
        </div>
        <div class="actions">
          <div class="ui button">Cancel</div>
          <div class="ui green button">Send</div>
        </div>
      </div>
    Código (Javascript):
    $('.fullscreen.modal')
      .modal('show')
    ;
     
    A Dawud le gusta esto.
  3. victorcf999

    victorcf999 Nuevo Miembro

    Se incorporó:
    19 de Abril de 2017
    Mensajes:
    29
    Me gusta recibidos:
    4
    Puntos de trofeos:
    3
    Género:
    Hombre
    Tienes razon voy a implementar las ventanas modales con semantic-ui , mas facil y mejor

    Muchas gracias
     

Comparte esta página