0

Los botones dentro del modal no aparecen, incluso si copio un código de una página y lo pego en mi html. Lo único que no se muestra son los botones. Aquí el código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="codigo.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>CliffPedia</title>
  </head>
<body>
  <!--Barra de navegacion-->
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand mb-0 h1" href="PaginaPrincipalBootstrap.html"><img class="d-inline-block align-top" src="https://steamuserimages-a.akamaihd.net/ugc/91604190949969147/088A09E3C677498614C124ACE76365CBDF969000/?imw=268&imh=268&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true" width="30" height="30"/>CliffPedia</a>
    <button class="navbar-toggler"type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">Menu</button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
              <a href="Yo.html" class="nav-link active">Yo</a>
          </li>
          <li class="nav-item active">
            <a href="Contacto.html" class="nav-link active">Contacto</a>
          </li>
          <li class="nav-item active">
            <a href="Historia.html" class="nav-link active">Historia</a>
          </li>
        </ul>
        <!--Modal-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" style="justify-tracks: left;">
          Iniciar Sesion
        </button>
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Inicio de Sesion</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 class="text-center">
                  <form>
                    <img src="https://steamuserimages-a.akamaihd.net/ugc/91604190949969147/088A09E3C677498614C124ACE76365CBDF969000/?imw=268&imh=268&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true" height="72" alt="Logo">
                    <h1>Iniciar Sesion</h1>
                    <label for="correo" class="sr-only"></label>
                    <input type="email" id="correo" class="form-control" placeholder="Correo electronico" required autofocus>
                    <br>
                    <label for="contraseña" class="sr-only">Contraseña</label>
                    <input type="password" id="contraseña" placeholder="Contraseña" class="form-control">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" value="Recuerdame">Recuerdame
                      </label>
                    </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>
                  </form>
                </div>
              </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>
    <!--Modal-->
    </div>
  </nav>
  <!--Barra de navegacion-->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

Y aquí el css:

.col{
    margin-left: 150px;
} 

.btn{
    position: absolute;
    left: 1710px;
    background-color: grey;
}

.container{
    background-color: rgb(160, 155, 155);
    font-size: 40px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(92, 91, 95);
    margin-top: 50px;
}

.overlay-image{
    height: 80vh;
    min-height: 300px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;    
}
.navbar-brand{
    color: white;
}
.col{
    margin-top: 50px;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    background-image: url("https://cdn.planetradio.co.uk/one/media/5f6c/6239/f694/007e/c382/1df3/20151018_044604_7549_770421.jpeg?quality=80&format=jpg&width=960&ratio=16-9&crop=25,0,476,800&resize=crop");
    size: 100%;
}

En caso de no haberse entendido lo de arriba: Al añadir un botón con <button> dentro del modal no se muestra, solo se añade una especie de espacio en blanco con el que no puedes interactuar. He intentado borrando el modal que tengo ahí y copiando otro de alguna página pero es lo mismo, aún así sigue sin mostrarse el botón.

1 respuesta 1

2

Quítale la clase "btn" y funciona ;)

<button type="button" class="btn-primary">Save changes</button>

U otra opción es que a la clase "btn" que modificas en tu CSS, le cambies el nombre

.btn-header{
position: absolute;
left: 1710px;
background-color: grey; }

Y también le cambies el nombre a tu clase en el botón del "header"

<button type="button" class="btn-header btn-primary" data-toggle="modal" data-target="#exampleModal" style="justify-tracks: left;">
1
  • Siiii muchas gracias amigo. :DDD Commented el 8 nov. 2021 a las 16:11

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.