Modal closes even clicking on it

Question

Modal closes even clicking on it

Asked 5 years, 8 months ago

Viewed 168 times

0

the modal opens normally, but I cannot use it. Anywhere where I click the modal closes, the initial proposal is that I could write e-mail and password.

.postagem {
  height: 100px;
}

#degrade {
  background: linear-gradient(80deg, #151515, #0404B4);
}

#transição {
  background: #0404B4;
}

#transição:hover {
  background: #013ADF;
}

.radius {
  border-radius: 50px;
}

.entrar {
  color: #013ADF;
}

#menu {
  float: right;
  padding: 10px 0px 10px 0px;
  right: 0;
}

.menu2 {
  float: right;
  padding: 10px 0px 10px 0px;
  right: 0;
}

h3 {
  color: white;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!--Barra de NAVEGAÇÂO-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-inverse">

  <div class="navbar-header">
    <!-- Inicio Botao toggler(so aparece tela pequena) -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#botaotoggle">
    <span class="navbar-toggler-icon"></span>
  </button>
    <!--Fim Botao toggler(so aparece tela pequena) -->
  </div>

  <div class="collapse navbar-collapse" id="botaotoggle">
    <ul class="navbar-nav ml-auto">

      <li class="nav-item active">
        <a class="nav-link" href="index.html">Home<span class="sr-only"></span></a>
      </li>

      <li class="nav-item" data-toggle="modal" data-target="#janela">
        <a class="nav-link" href="#">Entrar</a>
      </li>

    </ul>
  </div>

</nav>
<!--INICIO DA MODAL-->

<form class="modal fade" id="janela">

  <div class="modal-dialog">
    <div class="data-content">

      <!--HEAD DA MODAL-->

      <div class="modal-header">
        <h3 class="modal-title"> Fazer Login </h3>
        <button type="button" data-dismiss="modal" class="close"><span>&times;</span></button>
      </div>

      <!--HEAD DA MODAL-->

      <!--BODY DA MODAL-->
      <div class="modal-body">
        <div class="form-group">
          <input type="email" class="form-control" id="email" placeholder="Digite Seu e-mail" name="email">
        </div>

        <div class="form-group">
          <input type="password" class="form-control" id="password" placeholder="Digite Sua senha" name="senha">
        </div>

      </div>



      <!--BODY DA MODAL-->

      <!--FOOTER DA MODAL-->

      <div class="modal-footer">


        <!--botao cancelar-->
        <button type="submit" class="btn btn-default" data-dismiss="modal">
              Cancelar
            </button>

        <!--botao logar-->
        <button type="submit" class="btn btn-primary">
              Logar
            </button>



      </div>



      <!--FOOTER DA MODAL-->

    </div>

  </div>

</form>


<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

2 answers

Browser other questions tagged html css html5 modal bootstrap-4

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2019-02-27T18:56:43+00:00

You are using the wrong class in the div inside the modal: instead of class="data-content", the correct is class="modal-content":

Note that your modal is not even being rendered correctly: it is without the standard white box.

See below how it looks with due correction:

.postagem {
  height: 100px;
}

#degrade {
  background: linear-gradient(80deg, #151515, #0404B4);
}

#transição {
  background: #0404B4;
}

#transição:hover {
  background: #013ADF;
}

.radius {
  border-radius: 50px;
}

.entrar {
  color: #013ADF;
}

#menu {
  float: right;
  padding: 10px 0px 10px 0px;
  right: 0;
}

.menu2 {
  float: right;
  padding: 10px 0px 10px 0px;
  right: 0;
}

h3 {
  color: white;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!--Barra de NAVEGAÇÂO-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-inverse">

  <div class="navbar-header">
    <!-- Inicio Botao toggler(so aparece tela pequena) -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#botaotoggle">
    <span class="navbar-toggler-icon"></span>
  </button>
    <!--Fim Botao toggler(so aparece tela pequena) -->
  </div>

  <div class="collapse navbar-collapse" id="botaotoggle">
    <ul class="navbar-nav ml-auto">

      <li class="nav-item active">
        <a class="nav-link" href="index.html">Home<span class="sr-only"></span></a>
      </li>

      <li class="nav-item" data-toggle="modal" data-target="#janela">
        <a class="nav-link" href="#">Entrar</a>
      </li>

    </ul>
  </div>

</nav>
<!--INICIO DA MODAL-->

<form class="modal fade" id="janela">

  <div class="modal-dialog">
    <div class="modal-content">

      <!--HEAD DA MODAL-->

      <div class="modal-header">
        <h3 class="modal-title"> Fazer Login </h3>
        <button type="button" data-dismiss="modal" class="close"><span>&times;</span></button>
      </div>

      <!--HEAD DA MODAL-->

      <!--BODY DA MODAL-->
      <div class="modal-body">
        <div class="form-group">
          <input type="email" class="form-control" id="email" placeholder="Digite Seu e-mail" name="email">
        </div>

        <div class="form-group">
          <input type="password" class="form-control" id="password" placeholder="Digite Sua senha" name="senha">
        </div>

      </div>



      <!--BODY DA MODAL-->

      <!--FOOTER DA MODAL-->

      <div class="modal-footer">


        <!--botao cancelar-->
        <button type="submit" class="btn btn-default" data-dismiss="modal">
              Cancelar
            </button>

        <!--botao logar-->
        <button type="submit" class="btn btn-primary">
              Logar
            </button>



      </div>



      <!--FOOTER DA MODAL-->

    </div>

  </div>

</form>


<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

by hugocsl • **65,517** points · Answer 2 · 2019-02-27T17:11:28+00:00

Ideally you build your structure as close as possible to what the documentation says. Then use modal in the form not cool. Try to put the form whole within the structure of modal which would be the most appropriate. https://getbootstrap.com/docs/4.0/components/modal/

Note that I made a CSS to leave exactly as in the template you posted, so the modal is without background and no edge, to change this use the class .override I did in CSS

Dry the code from the image above.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <style>
    .postagem {
  height: 100px;
}
#degrade {
  background: linear-gradient(80deg, #151515, #0404B4);
}
#transição {
  background: #0404B4;
}
#transição:hover {
  background: #013ADF;
}
.radius {
  border-radius: 50px;
}
.entrar {
  color: #013ADF;
}
#menu {
  float: right;
  padding: 10px 0px 10px 0px;
  right: 0;
}
.menu2 {
  float: right;
  padding: 10px 0px 10px 0px;
  right: 0;
}
h3 {
  color: white;
}
.modal-content.override {
  background: none;
  border: none;
}

</style>
</head>

<body>
  <!--Barra de NAVEGAÇÂO-->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-inverse">
    <div class="navbar-header">
      <!-- Inicio Botao toggler(so aparece tela pequena) -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#botaotoggle">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!--Fim Botao toggler(so aparece tela pequena) -->
    </div>
    <div class="collapse navbar-collapse" id="botaotoggle">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">Home<span class="sr-only"></span></a>
        </li>
        <li class="nav-item" data-toggle="modal" data-target="#janela">
          <a class="nav-link" href="#">Entrar</a>
        </li>
      </ul>
    </div>
  </nav>
  <!--INICIO DA MODAL-->


<div class="modal fade" id="janela" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content override">
      <div class="data-content">

        <form>
          <!--HEAD DA MODAL-->
          <div class="modal-header">
            <h3 class="modal-title"> Fazer Login </h3>
            <button type="button" data-dismiss="modal" class="close"><span>&times;</span></button>
          </div>
          <!--HEAD DA MODAL-->
          <!--BODY DA MODAL-->
          <div class="modal-body">
            <div class="form-group">
              <input type="email" class="form-control" id="email" placeholder="Digite Seu e-mail" name="email">
            </div>
            <div class="form-group">
              <input type="password" class="form-control" id="password" placeholder="Digite Sua senha" name="senha">
            </div>
          </div>
          <!--BODY DA MODAL-->
          <!--FOOTER DA MODAL-->
          <div class="modal-footer">
            <!--botao cancelar-->
            <button type="submit" class="btn btn-default" data-dismiss="modal">
              Cancelar
            </button>
            <!--botao logar-->
            <button type="submit" class="btn btn-primary">
              Logar
            </button>
          </div>
          <!--FOOTER DA MODAL-->
        </form>

      </div>
    </div>
  </div>
</div>


  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>