0

Estoy trabajando en Ionic 6/Angular y usando Bootstrap 4.

Cree una barra lateral que desde ahí se activan los distintos Modal que manejaré. Pero haciendo la primera prueba el modal me está fallando. Intenté unos cuantos z-index en el contenedor del contenido-item porque vi algunas soluciones para este problema pero de momento no me resultó.

Así es como me queda al ejecutar el modal desde la opción estimulos.

introducir la descripción de la imagen aquí

Aquí mi código.

*{
  padding: 0px;
  outline: none;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
}


nav{
  width: 90px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: #1C1E57;
  overflow: hidden;
  transition: width 0.2s linear;
  -webkit-transition: width 0.2s linear;
  -moz-transition: width 0.2s linear;
  -ms-transition: width 0.2s linear;
  -o-transition: width 0.2s linear;
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
  z-index: 999;
}
ul{
  border-bottom: 1px solid #F1F1F1;
}
a{
  position: relative;
  color: #F1F1F1;
  display: table;
  width: 300px;
  padding: 10px;
  font-family: 'Roboto', sans-serif;
}
.fas{
  position: relative;
  width: 70px;
  height: 40px;
  top: 14px;
  font-size: 20px;
  text-align: center;
}
.nav-item{
  position: relative;
  top: 12px;
  margin-left: 10px;
}
a:hover{
  color: #00013A;
  background: #D6DE84;
  text-decoration: none;
}
nav:hover{
  width: 280px;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}




.contenedor{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.contenedor-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-template-areas:
  'sid cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot'
  'sid cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot'
  'sid cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot'
  'sid cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot'
  'sid cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot'
  'sid cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot'
  'sid cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot'
  'sid cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot'
  'sid cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot'
  'sid cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot cot';
}

.sid{
  grid-area: sid;
}
.sidebar{
  height: 100vh;

  display: flex;
  flex-direction: column;

  position:fixed;
  top: 0;
}




.contenido{
  grid-area: cot;
  height: 100vh;
  display: flex;
  justify-content: center;

  padding: 10px;

  background: red;
}
.contenido-item{
  width: 100%;

  display: flex;
  justify-content: center;
}
.contenido-item img{
  height: 100%;
  object-fit:cover;
  object-position: center;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<app-header3></app-header3>

<ion-content>
  <div class="contenedor">
    <div class="contenedor-grid">

      <!-- ============================================================== -->
      <!-- Sidebar -->
      <!-- ============================================================== -->
      <div class="sid">
        <nav class="sidebar">
          <ul>
            <li>
              <a href="#">
                <i class="fas fa-home"></i>
                <span href="#" class="nav-item">Inicio</span>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="fas fa-home"></i>
                <span href="#" class="nav-item">Ofrece</span>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="fas fa-home"></i>
                <span href="#" class="nav-item">Actividad</span>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="fas fa-home"></i>
                <span href="#" class="nav-item">Instrucción</span>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="fas fa-home"></i>
                <span href="#" class="nav-item">Recomendaciones</span>
              </a>
            </li>
          </ul>
          <ul>
            <li>
              <a type="button" data-toggle="modal" data-target="#EstimulosModalCenter">
                <i class="fas fa-home"></i>
                <span href="#" class="nav-item">Estimulos</span>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="fas fa-home"></i>
                <span href="#" class="nav-item">Guias</span>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="fas fa-home"></i>
                <span href="#" class="nav-item">Materiales</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>

      <!-- ============================================================== -->
      <!-- Contenido -->
      <!-- ============================================================== -->
      <div class="contenido">

        <div class="contenido-item">
          <img src="https://this-person-does-not-exist.com/img/avatar-gen11a536c34827c13629864202b1db9d7c.jpg" alt="">
        </div>

        <!-- ============================================================== -->
        <!-- Modal - Estimulos -->
        <!-- ============================================================== -->
        <div class="modal fade" id="EstimulosModalCenter" tabindex="-1" >
          <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                ...
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</ion-content>

4
  • ¿Dónde le estás poniendo estilos a ese modal, como para que intentaras usar z-index?
    – Alfabravo
    el 17 mar. 2023 a las 17:53
  • @Alfabravo Usando el Id del modal. Pero no es código que me funcionara por eso lo quite del css.
    – Carlos
    el 17 mar. 2023 a las 17:58
  • La mala noticia es que el código que tienes en la pregunta, ejecutado acá a pantalla completa, muestra el modal exactamente como dices que quieres
    – Alfabravo
    el 17 mar. 2023 a las 18:07
  • @Alfabravo Cierto. Bueno, toca analizar div por div.
    – Carlos
    el 17 mar. 2023 a las 18:16

1 respuesta 1

0

Te ocurre por el z-index, donde tienes un valor muy alto. Utiliza por ejemplo

z-index=2

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.