Bootstrap模式的作品，但不显示
问题描述：
我寻找不同的日子回答我的困境，但我找不到它。
我有一个jsp代码，其中包含两个模态，当我尝试显示其中一个模块时，它不显示，但显示出该元素（在显示器中没有任何更改，但焦点更改模态请允许我与模态的元素，例如输入字段）Bootstrap模式的作品，但不显示
和浏览器的控制台交互不显示任何错误
这是我的代码：
的index.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ejercicio 1</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./">Ejercicio</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="col-md-2 sidenav" id="info">
<!-- añadir información del elemento seleccionado -->
</div>
<div class="col-md-8 text-left">
<div class="panel panel-info">
<div class="panel-heading">
<h1>Tabla de Empleados</h1>
</div>
<div class="panel-body">
<%@include file="tablaEmpleados.jsp" %>
</div>
</div>
<br>
<br>
<div class="panel panel-success">
<div class="panel-heading">
<h1>Diferencias</h1>
</div>
<div class="panel-body">
<div class="col-md-6">
<h2>Request</h2>
<p>Aquí, los atributos solo permanecen cuando la petición
esté completa, o cuando se pasa de un servlet a otro y
son utiles cuando se necesita pasar información especifica
del lado de servlet a jsp.</p><br>
<p>Un ejemplo es el resultado de una consulta.</p>
</div>
<div class="col-md-6">
<h2>Session</h2>
<p>Aquí, los atributos permanecen activos mientras la
sesión este activa, ya que se espera que haya peticiónes
relacionadas. Los atributos de sesion no se pueden pasar
de un servlet a otro. Son utiles cuando se requiere
pasar información constantemente por una sesion</p><br>
<p>Un ejemplo es la identificación de un usuario.</p>
</div>
</div>
</div>
</div>
<div class="col-md-2 sidenav">
<div class="btn-group-vertical">
<button name="BotonAgregar" class="btn btn-info" data-toggle="modal" data-target="#ModalAgregar">
<span class="fa fa-check" aria-hidden="true"></span> Agregar
</button> <br>
<button name="BotonEditar" class="btn btn-success" data-toggle="modal" data-target="#ModalModificar" disabled>
<span class="fa fa-pencil" aria-hidden="true"></span> Editar
</button> <br>
<button name="BotonEliminar" class="btn btn-danger" id="Eliminar" disabled>
<span class="fa fa-trash" aria-hidden="true"></span> Editar
</button>
</div> <!--botones de agregar, eliminar y editar -->
</div>
</div>
<%@include file="../Modals/modalAgregar.jsp" %>
<%@include file="../Modals/modalModificar.jsp" %>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/popper.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/datatables.min.js"></script>
<script type="text/javascript" src="./js/bootbox.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</body>
</html>
tablaEmpleados.jsp：
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<jsp:include page="../app/modulo/EmpleadosServlet.do" />
<!DOCTYPE html>
<table class="table table-hover" id="tablaEmpleados">
<thead>
<tr>
<td>Nombre</td>
<td>Telefono</td>
<td>CURP</td>
<td>Correo</td>
</tr>
</thead>
<tbody id="cuerpo">
<c:forEach items="${Empleado}" var="item">
<tr class="fila">
<td class="data nombre">${item.nombre}</td>
<td class="data telefono">${item.telefono}</td>
<td class="data curp">${item.curp}</td>
<td class="data correo">${item.correo}</td>
</tr>
</c:forEach>
</tbody>
</table>
modalAgregar.jsp：
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<div id="ModalAgregar" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Agregar empleado</h4>
</div>
<div class="modal-body">
<form id="Agregar">
<input type="hidden" name="event" id="evm" value="1">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" class="form-control nombre" name="nombre">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
<input type="text" class="form-control telefono" name="telefono">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-address-card" aria-hidden="true"></i></span>
<input type="text" class="form-control curp" name="curp">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
<input type="text" class="form-control correo" name="correo">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-send" aria-hidden="true"></i></span>
<input type="submit" class="form-control" name="submit" value="Agregar empleado">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
modalModificar.jsp：
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<div id="ModalModificar" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modificar empleado</h4>
</div>
<div class="modal-body">
<form id="Modificar">
<input type="hidden" name="event" value="2">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" class="form-control nombre" name="nombre">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
<input type="text" class="form-control telefono" name="telefono">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-address-card" aria-hidden="true"></i></span>
<input type="text" class="form-control curp" name="curp" disabled>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
<input type="text" class="form-control correo" name="correo">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-send" aria-hidden="true"></i></span>
<input type="submit" class="form-control" name="submit" value="Modificar empleado">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
main.js：
$(document).ready(function() {
var ExpRegular = /[[a-z]\s]+/i;
var ExpRegularTel = /[0-9][0-9][0-9](-)[0-9](-)[0-9][0-9](-)[0-9][0-9](-)[0-9][0-9]/;
var ExpRegularCurp = /[A-Z]{4}[0-9]{6}[A-Z]{6}[0-9]{2}/;
var ExpRegularCorreo = /([a-z]|[0-9]|.|-|_)[email protected][a-z]+(.|[a-z])+/i;
var tabla = $("#tablaEmpleados").DataTable();
var nombre = "";
var telefono = "";
var curp = "";
var correo = "";
bootbox.setLocale("es");
$('#tablaEmpleados tbody').on('click', 'tr', function() {
nombre = tabla.row(this).data()[0];
telefono = tabla.row(this).data()[1];
curp = tabla.row(this).data()[2];
correo = tabla.row(this).data()[3];
$("button").each(function (index) {
$(this).removeAttr("disabled");
});
//$(".nombre").get(1).val(nombre);
//$(".telefono").get(1).val(telefono);
//$(".curp").get(1).val(curp);
//$(".correo").get(1).val(correo);
$("#info").empty();
$("#info").append("<p>Nombre: " + nombre + "</p><br><p>Telefono: " + telefono + "</p><br><p>CURP: " +
curp + "</p><br><p> Correo: " + correo + "</p>");
});
$('form').submit(function (event) {
var index = parseInt($(""));
event.preventDefault();
if (ExpRegular.exec($(".nombre").get()).val() === null || ExpRegular.exec($(".nombre").val()) !== $(".nombre").val()) {
bootbox.alert({
title: "Error",
size: "large",
message: "Error: El nombre no es valido"
});
} else if (ExpRegularTel.exec($(".telefono").val()) === null && ExpRegularTel.exec($(".telefono").val()) !== $(".telefono").val()) {
bootbox.alert({
title: "Error",
size: "large",
message: "Error, el telefono no es valido.<br> Recuerde que el formato debe ser: xxx-x-xx-xx-xx"
});
} else if (ExpRegularCurp.exec($(".curp").val()) !== null && ExpRegularCurp.exec($(".curp").val()) === $(".curp").val()) {
bootbox.alert({
title: "Error",
size: "large",
message: "Error, la CURP no es valido.<br> Recuerde que el formato debe ser: ABCD123456EFGHIJ78"
});
} else if (ExpRegularCorreo.exec($(".correo").val()) !== null && ExpRegularCorreo.exec($(".correo").val()) === $(".correo").val()) {
bootbox.alert({
title: "Error",
size: "large",
message: "Error, el correo no es valido."
});
} else {
$.ajax({
url: "app/modulo/EmpleadosServlet.do",
data: $(this).serialize(),
type: "POST",
success: function (data) {
bootbox.alert({
title: "Exito",
size: "small",
message: data
});
},
error: function (x, estado, exception) {
bootbox.alert({
title: "Error",
size: "small",
message: estado + " <br>" + exception
});
}
});
}
});
$("#Eliminar").click(function() {
bootbox.confirm({
title: "Confirmación requerida",
size: "large",
message: "¿Realmente quiere eliminar a este empleado? <br> Nombre: "
+ nombre + "<br> Telefono: " + telefono + "<br> CURP: " + curp + "<br> Correo: " + correo,
callback: function (resultado) {
if (resultado) {
$.ajax({
url: "app/modulo/EmpleadosServlet.do",
data: {
event: "1",
curp: curp
},
type: "POST",
success: function (data) {
bootbox.alert({
title: "Exito",
size: "small",
message: data
});
},
error: function (x, estado, exception) {
bootbox.alert({
title: "Error",
size: "small",
message: estado + " <br>" + exception
});
}
});
}
}
});
});
});
答
您是缺少引导的JavaScript。
尝试添加该CDN版本下面看看它的工作原理： （也值得尝试，以保持在相同的.jsp的模态（不导入/包括它）
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+1
我正在添加一个引导程序JavaScript。 。然而，我使用bootstrap beta 4.0.0并更改为您提供的CDN。 我猜4.0.0不能与模态分隔。 – Emenor
+0
是的，这是一个诚实的错误。很高兴听到它现在的作品！ –
对不起，我不能看bootstrap模式初始化。 –
我使用这样的按钮。 – Emenor