modal boostrap opens and closes alone

Asked

Viewed 3,628 times

2

I’m having a problem with my modal bootstrap. It is as simple as possible, I took the example of the bootstrap site itself to test it but when I click the button, it opens and closes immediately after automatically

<button type="button" class="btn btn-warning btn-lg" data-target="#modal" data-toggle="modal" id="botao_pedido">Faça seu pedido</button>

<div class="modal fade" id="modal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
            Olá
        </div>

    </div><!--modal-content-->
</div><!--modal-dialog-->

html twitter-bootstrap bootstrap-3 modal

5 answers

1

I was having the same problem, but I discovered in my code that there were two bootstrap statements

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

I kept only one and it worked.

1


I added the libs that Bootstrap itself propose and put your modal and worked normally.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>

    <body>
        <button type="button" class="btn btn-warning btn-lg" data-target="#modal" data-toggle="modal" id="botao_pedido">Faça seu pedido</button>

        <div class="modal fade" id="modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        Olá
                    </div>
                </div> <!--modal-content-->
            </div> <!--modal-dialog-->
    </body>
</html>

0

Matheus, okay? Check your browser console. He’s probably complaining about some import that hasn’t been done. Remember that bootstrap.js depends on jQuery to work. It may be something in this sense!

  • Console ta normal

  • Are the 3 Imports being made? (bootstrap.min.css, jquery.min.js and bootstrap.min.js). If they are, test in another browser.

  • Just complementing... I ran your example right here in my browser (firefox). Versions 3.3.7 of bootstrap and jquery 1.12.4

  • Yes, I managed to resolve the situation but thank you for your attention to the problem

0

I read in gringos foruns that the problem is usually in the insertion of javascript bootstrap files

<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-modal.js"></script>

it is advisable to use only bootstrap.js or bootstrap.min.js as it already includes it

-1

My case was just like Lucas. There were two declaration of the bootstrap.js file, I removed from the older version and it works very well now.

Browser other questions tagged html twitter-bootstrap bootstrap-3 modal

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