java - Bootstrap 3 模式窗口不适用于 spring mvc-6ren

java - Bootstrap 3 模式窗口不适用于 spring mvc

转载作者：行者123 更新时间：2023-12-02 06:16:03

我正在尝试使模态框与我的页面一起使用，我使用 spring-mvc 3.2 和 bootstrap 3.0.3。单击“添加用户”按钮没有任何效果，甚至当我将模态视图设置为显示时，无法使用关闭按钮将其关闭。

如何修复它？

这是jsp页面代码:

<!doctype html>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
  <head>
    <meta charset="utf-8">
    <titlTest modals</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="<c:url value="/resources/css/bootstrap.css" />" rel="stylesheet"  type="text/css" />

    <script type="text/javascript" src='<c:url value="/resources/js/bootstrap.js" />'></script>
    <script type="text/javascript" src='<c:url value="/resources/js/jquery-1.9.1.js" />'></script>
</head>

<body>
    <div class="container">
        <button class="btn btn-danger btn-mini" data-toggle="modal" data-target="#editUserModal">
            Add user
        </button>
    </div>
    <div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form:form method="post" action="/admin/users/update" commandName="user" role="form">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Modify user</h4>
                    </div>
                    <div class="modal-body">
                        <form:hidden path="id" placeholder="Id" value="${user.id}"/>
                        <div class="form-group">
                            <form:label path="firstName">First Name:</form:label>
                            <form:input path="firstName" class="form-control" placeholder="First Name" value="${user.firstName}"/>
                        </div>
                        <div class="form-group">
                            <form:label path="lastName">Last Name:</form:label>
                            <form:input path="lastName" class="form-control" placeholder="Last Name" value="${user.lastName}"/>
                        </div>
                        <div class="form-group">
                            <form:label path="email">Email:</form:label>
                            <form:input path="email" class="form-control" placeholder="Email" value="${user.email}"/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div><!-- /.modal-content -->
            </form:form>
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>

生成的 HTML 代码:

<html>
<head>
    <meta charset="utf-8">
    <title>Test modals</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="/resources/css/bootstrap.css" rel="stylesheet"  type="text/css" />

    <script type="text/javascript" src='/resources/js/bootstrap.js'></script>
    <script type="text/javascript" src='/resources/js/jquery-1.9.1.js'></script>
</head>

<body>
    <div class="container">
            <button class="btn btn-danger btn-mini" data-toggle="modal" data-target="#editUserModal">
                Add user
            </button>
    </div>
    <div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form id="user" role="form" action="/admin/users/update" method="post">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Modify user</h4>
                    </div>
                    <div class="modal-body">
                        <input id="id" name="id" placeholder="Id" value="0" type="hidden" value="0"/>
                        <div class="form-group">
                            <label for="firstName">First Name:</label>
                            <input id="firstName" name="firstName" placeholder="First Name" class="form-control" type="text" value=""/>
                        </div>
                        <div class="form-group">
                            <label for="lastName">Last Name:</label>
                            <input id="lastName" name="lastName" placeholder="Last Name" class="form-control" type="text" value=""/>
                        </div>
                        <div class="form-group">
                            <label for="email">Email:</label>
                            <input id="email" name="email" placeholder="Email" class="form-control" type="text" value=""/>
                        </div>
                        <div class="form-group">
                            <label for="password">Password:</label>
                            <input id="password" name="password" placeholder="Password" class="form-control" type="text" value=""/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div><!-- /.modal-content -->
            </form>
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>

最佳答案

您需要包含jquery，然后包含bootstrap，因为bootstrap需要jquery才能工作。

所以，交换这两行代码

 <script type="text/javascript" src='<c:url value="/resources/js/jquery-1.9.1.js" />'></script>
 <script type="text/javascript" src='<c:url value="/resources/js/bootstrap.js" />'></script>

关于java - Bootstrap 3 模式窗口不适用于 spring mvc，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21457329/

文章推荐： java - 通过Java进行邮件验证

文章推荐： java - 实现方法的不同枚举类型

文章推荐： java - 获取最近的时间 Android

文章推荐： java:8 个皇后使用深度优先搜索

spring - spring boot、spring BOM、spring IO应该用哪一个？
我尝试阅读有关 Spring BOM、Spring Boot 和 Spring IO 的文档。但是没有说明，我们应该如何一起使用它们？在我的项目中，我们已经有了自己的 Parent POM ，所以
spring - 从与 Spring 同时加载的非 spring 组件访问 Spring 上下文
我正在开发的很酷的企业应用程序正在转向 Spring。这对所有团队来说都是非常酷和令人兴奋的练习，但也是一个巨大的压力源。我们所做的是逐渐将遗留组件移至 Spring 上下文。现在我们有一个 huuu
spring - spring 调度程序和 spring 批处理项目编写器的事务问题
我正在尝试使用 @Scheduled 运行 Spring 批处理作业注释如下: @Scheduled(cron = "* * * * * ?") public void launchMessageDi
spring - Spring 应用程序上下文和 Spring 容器有什么区别？
我对这两个概念有点困惑。阅读 Spring 文档，我发现，例如。 bean 工厂是 Spring 容器。我还读到“ApplicationContext 是 BeanFactory 的完整超集”。但两者
spring - 如何在不同的 Spring 上下文之间共享 Spring bean？
我们有一个使用 Spring BlazeDS 集成的应用程序。到目前为止，我们一直在使用 Spring 和 Flex，它运行良好。我们现在还需要添加一些 Spring MVC Controller 。
spring - 如何将自定义 Spring 模式类型与传统 Spring 模式类型混合和匹配？
假设我有一个类(class) Person带属性name和 age ，它可以像这样用 Spring 配置: 我想要一个自定义的 Spring 模式元素，这很容易做到，允许我在我的 Sp
spring - 如何在 Spring 或 Spring Boot 中以编程方式在 Spring Mongo 数据中创建复合索引？
如何在 Java 中以编程方式使用 Spring Data 创建 MongoDB 复合索引？使用 MongoTemplate 我可以创建一个这样的索引:mongoTemplate.indexOps(
spring-batch - spring 批处理流作业与 spring 组合任务
我想使用 spring-complex-task 执行我的应用程序，并且我已经构建了复杂的 spring-batch Flow Jobs，它执行得非常好。你能解释一下spring批处理流作业与spr
spring - 在非 spring 应用程序中使用 spring 应用程序作为库
我实现了 spring-boot 应用程序，现在我想将它用作非 spring 应用程序的库。如何初始化 lib 类，以便 Autowiring 的依赖项按预期工作？显然，如果我使用“new”创建类实
spring-boot - Spring 云安全与 Spring 安全
我刚开始学习 spring cloud security，我有一个基本问题。它与 Spring Security 有何不同？我们是否需要在 spring boot 上构建我们的应用程序才能使用 spr
spring - Spring 和 Spring Boot 的区别
有很多人建议我使用 Spring Boot 而不是 Spring 来开发 REST Web 服务。我想知道这两者到底有什么区别？最佳答案总之 Spring Boot 减少了编写大量配置和样板代码的
spring - Maven : Spring 4 + Spring Security
您能向我解释一下如何使用 Spring 正确构建 Web 应用程序吗？我知道 Spring 框架的最新版本是 4.0.0.RELEASE，但是 Spring Security 的最新版本是 3.2.0
spring - 打印所有加载的 Spring bean - Spring Boot
我如何才能知道作为 Spring Boot 应用程序的一部分加载的所有 bean 的名称？我想在 main 方法中有一些代码来打印服务器启动后加载的 bean 的详细信息。最佳答案如spring-
spring - 寻找正确的方法 : Spring Social + Spring RESTful API + Spring WebApp + Mobile Clients
我有一个使用 Spring 3.1 构建的 RESTful API，也使用 Spring Security。我有一个 Web 应用程序，也是一个 Spring 3.1 MVC 应用程序。我计划让移动客
spring - 哪个版本的 Spring AMQP 和 Spring Rabbit 与 Spring 5 兼容？
升级到 Spring 5 后，我在 Spring Rabbit 和 Spring AMQP 中遇到错误。两者现在都设置为 1.5.6.RELEASE 有谁知道哪些版本应该与 Spring 5 兼容？
Spring Framework、Spring Security - 可以在没有 Spring Framework 的情况下使用 Spring Security 吗？
我现在已经使用 Spring Framework 3.0.5 和 Spring Security 3.0.5 多次了。我知道Spring框架使用DI和AOP。我还知道 Spring Security
spring - 避免在单个 jar 中合并多个 spring 依赖项时覆盖 spring.handlers/spring.schemas 的想法
我收到错误 Unable to Location NamespaceHandler when using context:annotation-config running (java -jar) 由
spring-mvc - spring boot/spring web app内嵌版本号
在 Spring 应用程序中嵌入唯一版本号的策略是什么？我有一个使用 Spring Boot 和 Spring Web 的应用程序。它已经足够成熟，我想对其进行版本控制并在运行时看到它显示在屏幕上
spring - 当存在两个或多个具有相同名称的实体时选择默认实体 - Spring Boot、Spring Data JPA、
我正在使用 spring data jpa 进行持久化。如果存在多个具有相同名称的实体，是否有一种方法可以将一个实体标记为默认值。类似@Primary注解的东西用来解决多个bean的依赖问题 @Ent
spring - spring DAOSupport有什么优势
我阅读了 Spring 框架的 DAOSupport 类。但是我无法理解这些 DAOSuport 类的优点。在 DAOSupport 类中，我们调用 getXXXTemplate() 方法来获取特定的

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

java - Bootstrap 3 模式窗口不适用于 spring mvc