Skip to content

Commit

Permalink
Added a JavaScript trigger using a CSS pseudo class
Browse files Browse the repository at this point in the history
  • Loading branch information
stephanrauh committed Apr 13, 2015
1 parent bc1fbfc commit a945685
Showing 1 changed file with 27 additions and 19 deletions.
46 changes: 27 additions & 19 deletions web/bootstrap/modal.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,52 +29,60 @@

<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">
<strong>Markup:</strong><br/>

<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;"/>
<b:button value="Ok" look="primary" dismiss="modal" onclick="return false;"/>
</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>
Expand Down

0 comments on commit a945685

Please sign in to comment.