Monday, 18 May 2015

Bootstrap JS Modal plugin in XPages: Introduction

The upcoming blog posts were actually meant for the new Bootstrap in XPages series but lately I've had several questions about how to use a Bootstrap JS Modal in XPages. In this short series I will show some examples of how the Bootstrap JS Modal plugin can be used in XPages.
The Bootstrap JS Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive. The plugin can be included individually, using Bootstrap's individual modal.js file, or using bootstrap.js or bootstrap.min.js. It can be used to display alert popups, videos, images and input fields. The Bootstrap JS Modal is divided into three primary sections: the header, body, and footer. All the code and styles are predefined by Bootstrap.

In this introduction I will give a basic example of a standard Bootstrap JS Modal whereby I use a button to trigger the Modal. Hereby it is necessary to make some adjustments to the standard Bootstrap 'syntax' as shown below.

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#Modal1">Open Modal</button>

This does not work for a button in an XPage / Custom Control. The following components will need to be adjusted accordingly: class = "btn btn btn Info-lg", data-toggle = "modal" and data-target = "# Modal1". For data-toggle = "modal" and data-target = "# Modal1" you can use attributes in the button properties and for class = "btn btn btn info-lg" the property styleClass should be used.


<!-- Trigger the modal with a button in an XPage / Custom Control -->
<xp:button value="Open Modal" id="button1" styleClass="btn btn-info btn-lg">
<xp:this.attrs>
<xp:attr name="data-toggle" value="modal"></xp:attr>
<xp:attr name="data-target" value="#Modal1"></xp:attr>
</xp:this.attrs>
</xp:button>

If we look at the Bootstrap JS Modal itself we can divide it into two parts, the Modal and Content part. A short explanation of the Model part: The parent <div> of the modal must have an ID that is the same as the value of the data-target attribute used to trigger the modal (in this example "Modal1").
The .modal class identifies the content of <div> as a modal and brings focus to it.
The .fade class adds a transition effect which fades the modal in and out. Remove this class if you do not want this effect.
The attribute role="dialog" improves accessibility for people using screen readers.
The .modal-dialog class sets the proper width and margin of the modal.

<!-- Modal -->
<div id="Modal1" class="modal fade" role="dialog">
<div class="modal-dialog">

A short explanation of the Content part: The <div> with class="modal-content" styles the modal (border, background-color, etc.). Inside this <div>, add the modal's header, body, and footer.
The .modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it. The .close class styles the close button, and the .modal-title class styles the header with a proper line-height.
The .modal-body class is used to define the style for the body of the modal. Add any HTML markup here; paragraphs, images, videos, etc.
The .modal-footer class is used to define the style for the footer of the modal. Note that this area is right aligned by default.

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">Basic Bootstrap Modal</h4>
</div>
<div class="modal-body">
<p>The Bootstrap Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

The result is a standard responsive Bootstrap JS Modal.



Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<!-- Trigger the modal with a button in an XPage / Custom Control -->
<xp:button value="Open Modal" id="button1" styleClass="btn btn-info btn-lg">
<xp:this.attrs>
<xp:attr name="data-toggle" value="modal"></xp:attr>
<xp:attr name="data-target" value="#Modal1"></xp:attr>
</xp:this.attrs>
</xp:button>
<!-- Modal -->
<div id="Modal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">Basic Bootstrap Modal</h4>
</div>
<div class="modal-body">
<p>The Bootstrap Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In part two we will further expand the Bootstrap JS Modal.

No comments:

Post a Comment