From a9456853c30e3371e620f9cfcd11d61f05780384 Mon Sep 17 00:00:00 2001
From: stephanrauh <stephan.rauh@gmx.net>
Date: Mon, 13 Apr 2015 21:16:28 +0200
Subject: [PATCH] Added a JavaScript trigger using a CSS pseudo class

---
 web/bootstrap/modal.xhtml | 46 +++++++++++++++++++++++----------------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/web/bootstrap/modal.xhtml b/web/bootstrap/modal.xhtml
index 264f2bdc..cd1c1f65 100644
--- a/web/bootstrap/modal.xhtml
+++ b/web/bootstrap/modal.xhtml
@@ -29,28 +29,33 @@
                 
                 <b:panel look="info">
                     <f:facet name="heading"><b>EXAMPLE - Triggering a modal</b></f:facet>
-                    <b:modal id="amodal" title="Modal Example">
-                        <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" onclick="return false;"/>
-                            <b:button value="Ok" look="primary" dismiss="modal" onclick="return false;"/>
-                        </f:facet>
-                    </b:modal>
+                    <h:form id="myFormID">
+	                    <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" onclick="return false;"/>
+	                            <b:button value="Ok" look="primary" dismiss="modal" onclick="return false;"/>
+	                        </f:facet>
+	                    </b:modal>
+                    </h:form>
                     <b:row>
-                        <b:column span="4">
+                        <b:column span="3">
                             <a id="atrigger" class="btn btn-primary btn-lg" href="#amodal" data-toggle="modal">Trigger (HTML A tag)</a>
                         </b:column>
-                        <b:column span="4">
+                        <b:column span="3">
                             <button id="btrigger" class="btn btn-info btn-lg" data-target="#amodal" data-toggle="modal">Trigger (HTML Button)</button>
                         </b:column>
-                        <b:column span="4">
+                        <b:column span="3">
                             <b:button value="Trigger (JSF passthrough)" look="success" p:data-target="#amodal" p:data-toggle="modal" onclick="return false;" size="lg"/>
                         </b:column>
+                        <b:column span="3">
+                            <b:button value="Trigger (JavaScript)" look="success" onclick="$('.modalPseudoClass').modal();return false;" size="lg"/>
+                        </b:column>
                     </b:row>
 
                     <f:facet name="footer">
@@ -58,7 +63,7 @@
 
                         <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
                             <![CDATA[
-                            <b:modal id="amodal" title="Modal Example">
+                            <b:modal id="amodal" title="Modal Example" styleClass="modalPseudoClass">
                             <p>Modal body</p>
                                 <f:facet name="footer">
                                     <b:button value="close" dismiss="modal" onclick="return false;"/>
@@ -66,15 +71,18 @@
                                 </f:facet>
                             </b:modal>
                             <b:row>
-                                <b:column span="4">
+                                <b:column span="3">
                                     <a id="atrigger" class="btn btn-primary btn-lg" href="#amodal" data-toggle="modal">Trigger (HTML A tag)</a>
                                 </b:column>
-                                <b:column span="4">
+                                <b:column span="3">
                                     <button id="btrigger" class="btn btn-info btn-lg" data-target="#amodal" data-toggle="modal">Trigger (HTML Button)</button>
                                 </b:column>
-                                <b:column span="4">
+                                <b:column span="3">
                                     <b:button value="Trigger (JSF passthrough)" look="success" p:data-target="#amodal" p:data-toggle="modal" onclick="return false;" size="lg"/>
                                 </b:column>
+		                        <b:column span="3">
+        		                    <b:button value="Trigger (JavaScript)" look="success" onclick="$('.modalPseudoClass').modal();return false;" size="lg"/>
+                		        </b:column>
                             </b:row>
                             ]]></script>
                     </f:facet>