Modals

Using Logi Popup Element with Bootstrap .modal-header, .modal-body and .modal-footer

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Step 2: Include 'modal.css' in Logi Info Application Include 'modal.css' in Logi Info Application

Simple Example

Logi XML

<PopupPanel ID="simpleExample" PopupModal="True" PopupPanelLocation="Center">
  <Division HtmlDiv="True" Class="modal-header">
    <Label HtmlTag="H4" Caption="..." />
  </Division>
  <Division HtmlDiv="True" Class="modal-body">
  </Division>
  <Division HtmlDiv="True" Class="modal-footer">
  </Division>
</PopupPanel>

Auto-Close

The following jQuery will close popup panel when clicking modal background.

$('.popupPanelModal').click(function() {
	ShowElement($(this).attr('id'),$(this).next().attr('id'),'Hide','');
});

Example

<Label Caption="Open Modal" Class="btn btn-primary">
  <Action ElementID="modalExample" Type="ShowElement" />
</Label>
<PopupPanel ID="modalExample" PopupModal="True" PopupPanelLocation="Center">
  <Division HtmlDiv="True" Class="modal-header">
    <Label Class="close fa fa-close">
      <Action Type="ShowElement" Display="Hide" ElementID="modalExample" />
    </Label>
    <Label HtmlTag="H4" Caption="Modal title" />
  </Division>
  <Division HtmlDiv="True" Class="modal-body">
    <Label Caption="The body..." />
  </Division>
  <Division HtmlDiv="True" Class="modal-footer">
    <Label Class="btn btn-primary" Caption="Save Changes" />
  </Division>
</PopupPanel>

Optional Sizes

Large modal Small modal

<Label Caption="Open Large" Class="btn btn-primary">
  <Action ElementID="modalLarge" Type="ShowElement" />
</Label>
<PopupPanel ID="modalLarge" PopupModal="True" PopupPanelLocation="Center" Class="modal-lg">
  <Division HtmlDiv="True" Class="modal-header">
    <Label Class="close fa fa-close">
      <Action Type="ShowElement" Display="Hide" ElementID="modalLarge" />
    </Label>
    <Label HtmlTag="H4" Caption="Large modal" />
  </Division>
  <Division HtmlDiv="True" Class="modal-body">
    <Label Caption="The body..." />
  </Division>
  <Division HtmlDiv="True" Class="modal-footer">
    <Label Class="btn btn-primary" Caption="Save Changes" />
  </Division>
</PopupPanel>

<Label Caption="Open Small" Class="btn btn-primary">
  <Action ElementID="modalSmall" Type="ShowElement" />
</Label>
<PopupPanel ID="modalSmall" PopupModal="True" PopupPanelLocation="Center" Class="modal-sm">
  <Division HtmlDiv="True" Class="modal-header">
    <Label Class="close fa fa-close">
      <Action Type="ShowElement" Display="Hide" ElementID="modalSmall" />
    </Label>
    <Label HtmlTag="H4" Caption="Small modal" />
  </Division>
  <Division HtmlDiv="True" Class="modal-body">
    <Label Caption="The body..." />
  </Division>
  <Division HtmlDiv="True" Class="modal-footer">
    <Label Class="btn btn-primary" Caption="Save Changes" />
  </Division>
</PopupPanel>