title: Using bootstrap 3 Modal and JSF 2.2
body: <p>I'm trying to open a Modal Bootstrap Dialog with a h:commandLink but without success. Let's see my code:</p>
  
  <p>1 - I have this commandLink:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"&gt;
  
  &lt;h:head /&gt;
  &lt;h:body&gt;
      &lt;ui:composition template="/templates/template.xhtml"&gt;
          &lt;ui:define name="content"&gt;
              &lt;h:form&gt;
  ...
  
  &lt;h:commandLink&gt;
                                                  &lt;f:passThroughAttribute name="data-toggle" value="modal" /&gt;
                                                  &lt;f:passThroughAttribute name="data-target"
                                                      value="#formBanca" /&gt;
                                                  &lt;i class="fa fa-edit"&gt;&lt;/i&gt;
                                              &lt;/h:commandLink&gt;
  ...
  
              &lt;/h:form&gt;
  </code></pre>
  
  <p>And after close tag "" i have the dialog DIV:</p>
  
  <pre><code>&lt;!-- Modal --&gt;
          &lt;div class="modal fade" id="formBanca" tabindex="-1" role="dialog"
              aria-labelledby="myModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-dialog"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal"
                              aria-label="Close"&gt;
                              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;...&lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                          &lt;button type="button" class="btn btn-primary"&gt;Save
                              changes&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>When i click in commandLink the ManagedBean is called but dialog don't open. 
  A very strange thing is that i tested in my Smartphone (Android) and dialog showed but with "loading bar in loop", let me try explain: is like page trying refresh but dialog stoped the refresh and "address bar" frozen in load.</p>