我正在尝试在我的Web应用程序上集成引导程序。现在，我想创建一个按钮，单击它后，将显示一个对话框。如果我的 xhtml 页面不包含 h：form，这是成功的，但是一旦我的 xhtml 页面呈现 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">
<h:head>
<title>SLEAM Book | Consult a Facebooker</title>
<link rel="shortcut icon" type="image/x-icon" href="#{resource['icons/hki2.gif']}"/>
<style>
.ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td {
border-style: none;
</style>
</h:head>
<h:body>
<ui:composition template="indexTemplate.xhtml">
<ui:define name = "content">
<h:form>
<h:outputText value="Add a Publication" styleClass="text-primary"/>
<br/><br/>
<h:inputText value="#{userBean.publicationContent}" styleClass="form-control"/>
<br/>
<p:commandButton value="Post"
action="#{userBean.createPublication}"
styleClass="btn btn-primary"
id="btn" ajax="true"/>
#{userBean.lps.size()}
<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>
<br/><br/><br/>
<div class="table-responsive">
<p:dataTable var="car" value="#{userBean.lps}" tableStyleClass="table table-striped">
<f:facet name="header">
List Of Publications
</f:facet>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Title">
<h:outputText value="#{car.title}" />
</p:column>
<p:column style="width:32px;text-align: center">
<p:commandButton value="Post"
id="btn"
ajax="true"
styleClass="btn btn-primary"/>
</p:column>
</p:dataTable>
<p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="carDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty userBean.selectedPublication}" columnClasses="label,value">
<h:outputText value="Id:" />
<h:outputText value="#{userBean.selectedPublication.id}" />
<h:outputText value="Title" />
<h:outputText value="#{userBean.selectedPublication.title}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</div>
</h:form>
</ui:define>
</ui:composition>
</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，但花了一些时间根据您的代码重新创建一个示例 jsf 项目，我让它工作然后我意识到解决方案非常简单，与 jsf 完全无关。在 html 表单中，如果您有一个按钮并且没有指定它默认提交的类型，因此单击它将提交表单。由于您不希望发生这种情况，因此您只想弹出一个模态而不是POST任何东西，您所要做的就是指定类型。用这个替换按钮，它应该可以工作：
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="button">
Launch Demo Modal
</button>
你可以这样尝试：
<p:commandLink value="Edit" styleClass="btn btn-primary" onclick="$('#myModal').modal('show');" update=":myForm" immediate="true"/>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<h:form id="myForm">
<div class="modal-header">
<h4 class="modal-title">Test Modal</h4>
</div>
<div class="modal-body">
Hello World
</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>
</h:form>
</div>
</div>
</div>呵