Bootstrap модального в thymeleaf проекта

У меня есть Maven + пружинный + thymeleaf + загрузочный проект с этой страницей:Bootstrap модального в thymeleaf проекта

<!DOCTYPE html> 

<html xmlns:th="http://www.thymeleaf.org"> 

<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
<title>Index</title> 
<meta name="description" content="app" /> 
<meta name="viewport" content="width=device-width,initial-scale=1" /> 

    <link href="css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}" /> 
    <link rel="stylesheet" href="../../css/bootstrap.css" th:href="@{/css/bootstrap.css}"/> 
    <link rel="stylesheet" href="../../css/bootstrap-responsive.css" th:href="@{/css/bootstrap-responsive.css}"/> 
    <link rel="stylesheet" href="../../css/bootstrap-responsive.min.css" th:href="@{/css/bootstrap-responsive.min.css}"/> 
    <link rel="stylesheet" href="../../css/bootstrap-modal.css" th:href="@{/css/bootstrap-modal.css}"/> 
    <script src="../../js/modernizr-2.0.6.min.js" type="text/javascript" th:src="@{/js/modernizr-2.0.6.min.js}"></script> 
    <script src="../../js/bootstrap.min.js" type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script> 
    <script src="../../js/bootstrap.js" type="text/javascript" th:src="@{/js/bootstrap.js}"></script> 
    <script src="../../js/jquery-2.0.3.js" th:src="@{/js/jquery-2.0.3.js}"></script> 


</head> 

<body> 
<div class="navbar"> 
       <div class="navbar-inner"> 
       <div class="container"> 
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </a> 
        <a class="brand" href="#">Lau</a> 
        <div class="nav-collapse collapse navbar-responsive-collapse"> 


        <ul class="nav pull-right"> 



         <li><a href="/BusinessPoint/sign_in" th:text="#{msg.sign_in}">Sign in</a></li> 
         <li class="divider-vertical"></li> 
         <li><a href="" th:text="#{msg.register}">Register</a></li> 
         <li><a href="#myModal" th:text="#{msg.register_company}">Register company</a></li> 
        </ul> 
        </div> 
       </div> 
       </div><!-- /navbar-inner --> 
      </div> 

    <h1 th:text="${serverTime}"></h1> 


     <a href="#modalwin" data-toggle="modal" class="btn btn-large">Display Window</a> 


<!-- first modal window --> 
    <div id="modalwin" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <header class="modal-header"> 
     <a href="#" class="close" data-dismiss="modal">x</a> 
     <h3>Prepare to be Amazed <small>or easily amused :]</small></h3> 
     </header> 

     <div class="modal-body"> 

     <p>Close me by clicking anywhere outside the window, or by clicking the blue button.</p> 

     <p>lool</p> 
     </div> 

     <footer class="modal-footer"> 
     <a href="#" class="btn btn-primary" id="okwin01">Sounds Good!</a> 
     </footer> 
    </div> <!-- @end @modalwin --> 


 
</body> 
</html>

И я не могу показать бутстраповскую модальность. Что еще я вижу? » характер возле моей кнопки ... Я включил все необходимые файлы. Файлы Css в порядке, я думаю, файлы js тоже. Я пробовал все и ничего не получал. Есть идеи?

Источник файла:

<!DOCTYPE html> 


<html> 

<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
<title>Index</title> 
<meta name="description" content="app" /> 
<meta name="viewport" content="width=device-width,initial-scale=1" /> 

    <link href="/BusinessPoint/css/bootstrap.min.css" rel="stylesheet" /> 
    <link rel="stylesheet" href="/BusinessPoint/css/bootstrap.css" /> 
    <link rel="stylesheet" href="/BusinessPoint/css/bootstrap-responsive.css" /> 
    <link rel="stylesheet" href="/BusinessPoint/css/bootstrap-responsive.min.css" /> 
    <script src="/BusinessPoint/js/modernizr-2.0.6.min.js" type="text/javascript"></script> 
    <script src="/BusinessPoint/js/bootstrap.min.js" type="text/javascript"></script> 
    <script src="/BusinessPoint/js/bootstrap.js" type="text/javascript"></script> 
    <script src="/BusinessPoint/js/bootstrap-modal.js"></script> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head> 

<body> 
<div class="navbar"> 
       <div class="navbar-inner"> 
       <div class="container"> 
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </a> 
        <a class="brand" href="#">Laud</a> 
        <div class="nav-collapse collapse navbar-responsive-collapse"> 


        <ul class="nav pull-right"> 



         <li><a href="/BusinessPoint/sign_in">Sign in</a></li> 
         <li class="divider-vertical"></li> 
         <li><a href="">Register</a></li> 
         <li><a href="#myModal">Register company</a></li> 
        </ul> 
        </div> 
       </div> 
       </div><!-- /navbar-inner --> 
      </div> 

    <h1>July 31, 2013 4:24:24 PM CEST</h1> 



<div id="w" class="container center"> 

<!-- first modal window --> 
    <div id="modalwin" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <header class="modal-header"> 
     <a href="#" class="close" data-dismiss="modal">x</a> 
     <h3>Prepare to be Amazed <small>or easily amused :]</small></h3> 
     </header> 




    </div> 

<a href="#modalwin" data-toggle="modal" class="btn btn-large">Display Window</a> 
? 

</div> 
</body> 
</html>

источник

2013-07-30 Mateusz Sulima

гул ... можем ли мы видеть, как выглядит визуализированный html, когда он выходит из тимелеафа? – hubbardr

Теперь источник файлов, созданный браузером, находится в главном сообщении. –

Загрузите jquery.js перед загрузкой любых js. т.е. сделать это как ниже ' ' –

У меня была такая же проблема. Убедитесь, что вы импортировать AJAX и Bootstrap непосредственно перед закрытием тега тела, например, так:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> 
</body> 
</html>

и это в голову раздел:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Я не уверен, что здесь дело, но он определенно работал , С другой стороны, это не сработало, когда я переместил все строки в главный тег.

источник

2016-11-18 10:16:25 jarosik

Bootstrap модального в thymeleaf проекта

ответ

Смежные вопросы