Modal does not open in HTML

Asked

Viewed 196 times

-2

Good morning!!

I have a modal created on my page, but when I click on the link I referenced it does not work, it just happens nothing. I have it in another page and it works normal, but on this page I put the code it does not funf. Someone knows what can be?

<?php
    session_start();
?>

<html>
  <head>
        <link rel="icon" href="../app/resources/logo_icon.png" type="image/x-icon">
        <title>Fatec SIS</title>

        <link href="../../app/node_modules/bootstrap/compiler/bootstrap.css" rel="stylesheet">
        <link href="css/recuperar_senha.css" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    </head>
    <body id="RecuperaForm">

        <div class="container">     
            <div class="main-div">
                <div class="panel">
                    <h1><img src="https://img.icons8.com/cool-color/64/000000/forgot-password.png"></i></h1>
                    <p class="espacamento-paragrafo">Redefinir sua senha</p>
                </div>

                <div class="box-form">
                    <form id="Recupera" action="../src/model/recupera_senha.php" method="POST">
                        <p class="msg"> Digite seu endereço de e-mail e nós lhe enviaremos um link para redefinir sua senha. </p>
                        <div class="form-group">
                            <input name="email" id="txtEmail" type="email" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Digite seu endereço de email">
                        </div>

                        <button type="submit" class="btn btn-success">Enviar email de redefinição de senha</button>
                    </form>
                </div>
            </div>

            <div class="modal" id="termos" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"> Title </h4>
                            <button type="button" class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>

                        <div class="modal-body">
                            <p>TESTE</p>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="menu">
                <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#" data-toggle="modal" data-target="#termos">Termos</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Privacidade</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Segurança</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="painel.php">Entre no sistema FatecSis</a>
                    </li>
                </ul>
            </div>
        </div>

        <script src="js/index.js" type="text/javascript"></script>
    </body>
</html>
html css twitter-bootstrap front-end modal
  • 1

    Are you indexing jQuery in the index? For Modal to open, you must have jQuery and Bootstrap.js in the document

2 answers

1

I don’t see the bootstrap.min.js tag check if your page exists!

like Bootstrap and a package you have to import them if you want it to work right

1

Guys I managed to solve, as I am using Node.js package manager I needed to import these files. I was really forgetting to import. Thanks for the comment you guys helped a lot.

<script src="../../app/node_modules/jquery/dist/jquery.js"></script>
<script src="../../app/node_modules/popper.js/dist/umd/popper.js"></script>
<script src="../../app/node_modules/bootstrap/dist/js/bootstrap.js"></script>

Browser other questions tagged html css twitter-bootstrap front-end modal

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