Bootstrap模态无法打开

时间:2015-10-17 15:27:11

标签: html css twitter-bootstrap

我正在尝试在我的页面上添加一个bootstrap模式,但它根本没有打开,我已经尝试过移动css和js而没有成功,<!DOCTYPE html> <html lang="en"> <head> <title>Portfolio</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" href="modal" >Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> 与id相同在div。

我做错了什么?

我的代码:

#header div {display:inline-block;}

代码为

fiddle

1 个答案:

答案 0 :(得分:2)

您的代码<button type="button" class="btn btn-info btn-lg" href="modal" >Open Modal</button>

上有一些错误

href="modal"更改为data-toggle="modal"并将data-target="#myModal"添加到按钮属性。

这应该可以解决问题。

希望这有帮助!