title: Bootstrap 3 modal window does not work with spring mvc
body: <p>I am trying to make Modals work with my page, i use spring-mvc 3.2 with bootstrap 3.0.3.
  Clicking on a "Add user" button has no effect, even more when i set modal view to show, it cannot be closed using close buttons.</p>
  
  <p><strong>How can I fix it?</strong></p>
  
  <p><strong>Here is the jsp page code:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;%@taglib uri="http://www.springframework.org/tags" prefix="spring" %&gt;
  &lt;%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %&gt;
  &lt;%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %&gt;
  
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;titlTest modals&lt;/title&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;link href="&lt;c:url value="/resources/css/bootstrap.css" /&gt;" rel="stylesheet"  type="text/css" /&gt;
  
      &lt;script type="text/javascript" src='&lt;c:url value="/resources/js/bootstrap.js" /&gt;'&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src='&lt;c:url value="/resources/js/jquery-1.9.1.js" /&gt;'&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;button class="btn btn-danger btn-mini" data-toggle="modal" data-target="#editUserModal"&gt;
              Add user
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;form:form method="post" action="/admin/users/update" commandName="user" role="form"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                          &lt;h4 class="modal-title" id="myModalLabel"&gt;Modify user&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;form:hidden path="id" placeholder="Id" value="${user.id}"/&gt;
                          &lt;div class="form-group"&gt;
                              &lt;form:label path="firstName"&gt;First Name:&lt;/form:label&gt;
                              &lt;form:input path="firstName" class="form-control" placeholder="First Name" value="${user.firstName}"/&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;form:label path="lastName"&gt;Last Name:&lt;/form:label&gt;
                              &lt;form:input path="lastName" class="form-control" placeholder="Last Name" value="${user.lastName}"/&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;form:label path="email"&gt;Email:&lt;/form:label&gt;
                              &lt;form:input path="email" class="form-control" placeholder="Email" value="${user.email}"/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="submit" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;&lt;!-- /.modal-content --&gt;
              &lt;/form:form&gt;
          &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;&lt;!-- /.modal --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Resulting HTML code:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Test modals&lt;/title&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;link href="/resources/css/bootstrap.css" rel="stylesheet"  type="text/css" /&gt;
  
      &lt;script type="text/javascript" src='/resources/js/bootstrap.js'&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src='/resources/js/jquery-1.9.1.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
              &lt;button class="btn btn-danger btn-mini" data-toggle="modal" data-target="#editUserModal"&gt;
                  Add user
              &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;form id="user" role="form" action="/admin/users/update" method="post"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                          &lt;h4 class="modal-title" id="myModalLabel"&gt;Modify user&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;input id="id" name="id" placeholder="Id" value="0" type="hidden" value="0"/&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="firstName"&gt;First Name:&lt;/label&gt;
                              &lt;input id="firstName" name="firstName" placeholder="First Name" class="form-control" type="text" value=""/&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="lastName"&gt;Last Name:&lt;/label&gt;
                              &lt;input id="lastName" name="lastName" placeholder="Last Name" class="form-control" type="text" value=""/&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="email"&gt;Email:&lt;/label&gt;
                              &lt;input id="email" name="email" placeholder="Email" class="form-control" type="text" value=""/&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="password"&gt;Password:&lt;/label&gt;
                              &lt;input id="password" name="password" placeholder="Password" class="form-control" type="text" value=""/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="submit" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;&lt;!-- /.modal-content --&gt;
              &lt;/form&gt;
          &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;&lt;!-- /.modal --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>