单击一个按钮时打开多个模态

Question

我正在使用JSF制作一个Web应用程序，最近我尝试添加一个在按下某个按钮时弹出的模态。我的问题是，每当我按下按钮时，都会在彼此面前弹出 3 个模态，我希望只有一个模态。

我使用 bean 将信息动态添加到数据表中，触发模式的按钮放置在数据表的列中。目前我的数据表中有三个项目，我认为问题是每当我按下其中一个按钮时，都会为所有 3 个按钮调用模态，但我对如何解决它一无所知。

这是我的代码：

<b:row style="margin:10px;">
  <b:dataTable 
     id="recipeTable" 
     var="r" 
     value="#{recipebean.findAll()}" 
     striped="true"
     page-length-menu="5,10,20"
     page-length="5">
       <b:dataTableColumn label="Image" style="width:160px;" orderable="false">
          <b:thumbnail>
             <b:image value="resources/img/thumbnail.svg" style="height:150px; width: 100%;"/>
          </b:thumbnail>
        </b:dataTableColumn>
       <b:dataTableColumn label="Title" style="width:500px;" id="ingredientTable">
          <h3>#{r.name}</h3>
       </b:dataTableColumn>
       <b:dataTableColumn label="Date">
          <h4 style="text-align: center; margin-top: 4.5em;">#{r.creationTime}</h4>
       </b:dataTableColumn>
       <b:dataTableColumn label="Rating">
          <h4 style="text-align: center; margin-top: 4.5em;">#{r.creationTime}</h4>
       </b:dataTableColumn>
       <b:dataTableColumn label="Favorite" orderable="false">
          <b:modal id="amodal" title="Modal Example" styleClass="modalPseudoClass">
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        <f:facet name="footer">
                          <b:button value="Close" dismiss="modal" />
                          <b:button value="Ok" look="primary" dismiss="modal" />
                        </f:facet>
         </b:modal>
         <b:button icon-awesome="fa-heart" style="margin-left:2em; margin-top:5em;" onclick="$('.modalPseudoClass').modal()"/>
       </b:dataTableColumn>
   </b:dataTable>
 </b:row>

Answer 1

正如 Mitch 上面提到的，在数据表的每一行中都会生成一个模态。当然，从阅读源代码中可能并不明显，因为 *.xhtml 文件只包含一个模态。

如果需要每行一个单独的模态，则可以使用 id 而不是 CSS 类来打开模态：

    <b:button icon-awesome="fa-heart" onclick="$('#{amodal.clientId}').modal()"/>

或者，您可以通过添加行号属性(或类似的东西(使 CSS 类唯一。

但是，一般来说，最好将模式移出数据表。否则，会生成大量 HTML 代码，从而降低应用程序的性能。