Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modals are immediately closed with Bootstrap CSS

I am facing an issue where the Twitter Bootstrapp CSS opens my animation with fade and immediately closes it. I do not know why this happens, can anyone help?

Update: Apperantly, the bootstrap.css already has the Modals implemented. So, using both of them makes a trouble. Leaving this for future searchers.

JSFiddle Link: http://jsfiddle.net/GB9ud/

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-9">
    <script src="js/jquery-1.7.1.min.js" lang="text/javascript"></script>
    <script src="js/bootstrap.js" lang="text/javascript"></script>
    <script src="js/bootstrap-tooltip.js" lang="text/javascript"></script>
    <script src="js/main.js" lang="text/javascript"></script>
    <script src="js/bootstrap-modal.js" lang="text/javascript"></script>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
    <title>Library Management System</title>
</head>
<body>
    <a data-toggle="modal" data-book-id="1" href="#extendbook" class="btn">Extend</a>
    <div id="extendbook" class="modal hide fade">
        <div class="modal-header">
            <a data-dismiss="modal" class="close">×</a>
            <h3>Modal header</h3>
        </div>
        <div class="modal-body">
            <p>One fine body…</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn">Close</a><a href="#" class="btn btn-primary">Save changes</a>
        </div>
    </div>
    </body>
</html>
like image 489
Mustafa Avatar asked Mar 22 '12 20:03

Mustafa


1 Answers

You are calling the modal twice so it's loading then closing then loading again

like image 196
Rhyso Avatar answered Oct 15 '22 18:10

Rhyso