0
我试图在我的web应用程序上集成bootstrap。 现在，我想创建一个按钮，点击它后会显示一个对话框。 如果我的xhtml页面不包含h：表格，但是一旦我的xhtml页面出现h：表格，则成功完成此模型无法显示。Bootstrap模式不能显示在<h:form>
贝娄按钮：
<div class="panel panel-default">
<div class="panel-heading">
Modals
</div>
<div class="panel-body">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch Demo Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>这是我的，包括模式的按钮XHTML页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="/pages/indexTemplate.xhtml">
\t <h:head>
\t <title>SLEAM Book | Consult a Facebooker</title>
<link rel="shortcut icon" type="image/x-icon" href="#{resource['icons/hki2.gif']}"/>
<style>
\t \t \t .ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td {
\t \t border-style: none;
</style>
</h:head>
\t <h:body>
\t <ui:composition template="indexTemplate.xhtml">
\t \t \t <ui:define name = "content">
\t \t <h:form>
\t \t <h:outputText value="Add a Publication" styleClass="text-primary"/>
\t \t <br/><br/>
\t \t \t <h:inputText value="#{userBean.publicationContent}" styleClass="form-control"/>
\t \t \t <br/>
\t \t \t <p:commandButton value="Post"
\t \t \t \t \t \t \t \t \t action="#{userBean.createPublication}"
\t \t \t \t \t \t \t \t \t styleClass="btn btn-primary"
\t \t \t \t \t \t \t \t \t id="btn" ajax="true"/>
\t \t \t \t \t #{userBean.lps.size()}
\t \t \t \t \t <div class="panel panel-default">
<div class="panel-heading">
Modals
</div>
<div class="panel-body">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch Demo Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
\t \t \t \t \t <br/><br/><br/>
\t \t \t \t \t <div class="table-responsive">
\t \t \t \t \t <p:dataTable var="car" value="#{userBean.lps}" tableStyleClass="table table-striped">
\t \t \t \t \t <f:facet name="header">
\t \t \t \t \t List Of Publications
\t \t \t \t \t </f:facet>
\t \t \t \t \t <p:column headerText="Id">
\t \t \t \t \t <h:outputText value="#{car.id}" />
\t \t \t \t \t </p:column>
\t \t \t \t \t <p:column headerText="Title">
\t \t \t \t \t <h:outputText value="#{car.title}" />
\t \t \t \t \t </p:column>
\t \t \t \t \t <p:column style="width:32px;text-align: center">
\t \t \t \t \t \t \t \t <p:commandButton value="Post"
\t \t \t \t \t \t \t \t \t \t \t \t id="btn"
\t \t \t \t \t \t \t \t \t \t \t \t ajax="true"
\t \t \t \t \t \t \t \t \t \t \t \t styleClass="btn btn-primary"/>
\t \t \t \t \t </p:column>
\t \t \t \t \t </p:dataTable>
\t \t \t \t \t \t <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
\t \t \t \t \t <p:outputPanel id="carDetail" style="text-align:center;">
\t \t \t \t \t <p:panelGrid columns="2" rendered="#{not empty userBean.selectedPublication}" columnClasses="label,value">
\t \t \t \t \t \t <h:outputText value="Id:" />
\t \t \t \t \t <h:outputText value="#{userBean.selectedPublication.id}" />
\t \t \t \t \t
\t \t \t \t \t <h:outputText value="Title" />
\t \t \t \t \t <h:outputText value="#{userBean.selectedPublication.title}" />
\t \t \t \t \t </p:panelGrid>
\t \t \t \t \t </p:outputPanel>
\t \t \t \t \t </p:dialog>
\t \t \t \t \t </div> \t \t
\t \t \t \t </h:form>
\t </ui:define>
\t \t </ui:composition>
\t </h:body>
</html>faces-config.xml中的文件是：
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
version="2.2">
</faces-config>你有没有请有关解决此问题的任何想法？非常感谢。
你能包括JSF是什么样子 – Sasang
你好@Sasang，我用jsf 2.2。我在我更新的问题上分享了我的完整xhtml页面以及文件faces-config.xml。你可以看看。非常感谢。 – Nerimen