Wednesday, 20 May 2015

Bootstrap JS Modal plugin in XPages: Trigger via JavaScript including Modal Options

In the previous blog post, Bootstrap JS Modal plugin in XPages: Introduction, I showed how a standard Bootstrap JS Modal can be used in XPages. In this blog post I will show how the Bootstrap JS Modal can be triggered via JavaScript including some Modal Options. In the example below I use a button to display the Modal. But let's first look at the available Modal Options. In the table below the available Modal Options are displayed by Name, Type, Default value and Description.

Modal Options
Important: Modal Options can be used through data attributes or JavaScript. For data attributes it is important to append 'data-' to the option name, for example data-backdrop="true".

Name
Type
Default
Description
backdrop boolean or the string "static true Specifies whether the modal should have a dark overlay:
true - dark overlay
false - no overlay (transparent)
If you specify the value "static", it is not possible to close the modal when clicking outside of it
keyboard boolean true Specifies whether the modal can be closed with the escape key (Esc):
true - the modal can be closed with Esc
false - the modal cannot be closed with Esc
show boolean true Specifies whether to show the modal when initialized

In what way can we within XPages trigger the Bootstrap JS Modal via JavaScript, add Modal Options and show the Modal through a button. At first we create the button and the Modal.

<!-- Show the modal via a button in an XPage / Custom Control -->
<xp:button value="Open Modal" id="button1" styleClass="btn btn-info btn-lg">
</xp:button>

In this situation, we do NOT use attributes in the button properties as in the example in the previous blog post.

<!-- 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">Bootstrap JS Modal</h4>
</div>
<div class="modal-body">
<p>The Bootstrap Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive. Bootstrap JS Modal plugin in XPages: Trigger Via JavaScript including Modal Options</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Furthermore we need the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin and include it on the Custom Control / XPage. You can add the XSnippet to the Script Libraries. 



<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>

The script itself can be made up as follows. The name of the ids in the script must correspond with the id of the Button and the id of the Modal.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(function(){
x$("#{id:button1}").click(function(){
x$("#{id:Modal1}").modal(
{backdrop: true,
keyboard: false,
show: true
}
);
});
});
]]></xp:this.value>

The result is a responsive Bootstrap JS Modal which is triggered through JavaScript with a dark overlay (backdrop: true) and that can NOT be closed with the Escape key (keyboard: false)





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">
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(function(){
x$("#{id:button1}").click(function(){
x$("#{id:Modal1}").modal(
{backdrop: true,
keyboard: false,
show: true
}
);
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<!-- Show the modal via a button in an XPage / Custom Control -->
<xp:button value="Open Modal" id="button1" styleClass="btn btn-info btn-lg"></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">
Bootstrap JS Modal
</h4>
</div>
<div class="modal-body">
<p>The Bootstrap Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive. Bootstrap JS Modal plugin in XPages: Trigger Via JavaScript including Modal Options.</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 the following blog post the Methods and Events will be explained in more detail.

4 comments:

  1. Great post. But I have a problem. If the scriptblock insert, the background is darker but the dialog is shown for a second, perhaps. Then it is normal. If the scriptblock not inside, then is okay. The dialog shown normal.
    Can you explain it?

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. I send a link to google Drive for a demo.

    ReplyDelete
    Replies
    1. Sorry for the late response. Had some very busy weeks. Thanks for the database. I will look at it this weekend.

      Delete