modal boostrap opens and closes alone

Question

modal boostrap opens and closes alone

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

0

I have a problem with my bootstrap modal. It is as simple as possible, I took the example from the bootstrap site itself to test it however when I click the button, it opens and closes immediately afterwards

<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

asked by anonymous 23.12.2016 / 19:01

4 answers

How to remove the Fatal error: Uncaught Error: Class Dynamic query using JPQL

score 1 · Answer 1

I added the libs that Bootstrap itself proposes and put its modal and worked normally.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><!--LatestcompiledandminifiedCSS--><linkrel="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><buttontype="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>

score 0 · Answer 2

Matheus, beauty? Take a look at your browser's console. You're probably complaining about some import that has not been made. Remember that bootstrap.js depends on jQuery to work. It could be something like this!

score 0 · Answer 3

I read in some forums that the problem is usually in the insertion of the bootstrap javascript 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 bootstrap.js or bootstrap.min.js as it already includes

score 0 · Answer 4

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>--><scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

I only kept one and it worked.