为什么我的引导程序无法正常工作

时间:2013-07-19 15:10:18

标签: javascript twitter-bootstrap

我尝试使用modal插件,但没有效果。我看到代码,这个地方还可以。所以我的代码中有一些东西,但我看到了turtal ..所以帮助我,给我一些建议。

  <!DOCTYPE HTML>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link media="all" rel="stylesheet" href="docs/assets/css/bootstrap.css" type="text/css" />
        <link media="all" rel="stylesheet" href="docs/assets/css/bootstrap-responsive.css" type="text/css" />
        <script src="sgsheg/jquery-1.10.0.min.js" type="text/javascript"></script>
        <script src="sgsheg/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/bootstrap-modal.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="model" aria-hidden="true" >&times;</button>
            <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>

enter image description here

2 个答案:

答案 0 :(得分:1)

您错过了toggle r

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

或者您可以手动触发

$(function(){
  $(".modal").modal("show"); //shows the modal on document ready
  //$(".some-class").on('click' , function() { //this is if you want to fire it with a button
  //   $(".modal").modal("show");              //of course you don't have to use both data-*
  //}                                          //and javascript, choose one.  
}

这取决于你必须做什么;

如果show准备就绪时modal docjavascript使用html,如果不是仅使用bootstrap.js,则使用bootstrap-modal

<强>更新 仅包含{{1}}或{{1}},而不是仅包括。

答案 1 :(得分:0)

事实证明,百里香叶子引擎需要指定为 src 的脚本

th:src="@{...}"

所以试试

th:src="@{sgsheg/jquery-1.10.0.min.js}"
th:src="@{sgsheg/bootstrap.min.js}"

另外,你真的不需要包含bootstrap-modal.js,因为它已经在bootstrap.min.js

如果您已定义了resourceHandler as "/sgsheg/**" and "/js/**",则需要在 src网址前面添加斜杠(/)。