使用Bootstrap CSS即时关闭Modals

问题描述:

我面临的一个问题是,Twitter Bootstrapp CSS以淡入淡出的方式打开我的动画并立即关闭它。我不知道为什么会发生这种情况,谁能帮忙?使用Bootstrap CSS即时关闭Modals

更新:值得注意的是,bootstrap.css已经实现了Modals。所以,使用它们都会造成麻烦。留给未来的搜索者。

的jsfiddle链接: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> 
+0

我猜想有些事情会从您向我们展示的标记中看不到。你也可以链接到该网站或创建一个jsfiddle? – kinakuta 2012-03-22 21:02:21

+0

@kinakuta创建了一个jsfiddle,http://jsfiddle.net/GB9ud/ – Mustafa 2012-03-22 21:05:32

+0

那么你的问题解决了吗? – 2012-03-22 22:00:26

您所呼叫的模式的两倍,所以它加载然后关闭,然后再次载入

只需添加到这个,我遇到同样的问题,并在解决方案我的情况是将我的jQuery版本升级到1.9或更高版本。

我在使用asp.NET处理项目时遇到了同样的问题。 我正在使用bootstrap 3.0.1解决了它降级到Bootstrap 2.3.2。