Modal

The silk:Modal component helps to create a manageable Bootstrap modal element.

Tag Definition

Used as a container:

<silk:Modal
  id=""
  title=""
  closeButton="false"
  helpButton="false"
  size=""
  centered="true"
  limitedClose="true"
  bodyMargin="true"
  renderIf=""
>
   Contains: SilkBbuilder components and HTML, or the silk:ModalBody and silk:ModalFooter
</silk:Modal>

Modal Implementation

The silk:Modal can be implemented in these ways.

Basic Modal with no footer.

For this scenario, the component can directly host HTML and SilkBuilder components. If the silk:ModalFooter will not be used, then the silk:ModalBody tag is not necessary; it will be added automatically.

<silk:Modal id="myModal" title="Some Title" closeButton="true" >
  Contains: SilkBbuilder components and HTML.
</silk:Modal>

Modal with footer

If the silk:ModalFooter will be used, then it has to be added together with the silk:Body tag.

<silk:Modal id="myModal" title="Some Title" closeButton="true" >
  <silk:ModalBody>
    Contains: SilkBbuilder components and HTML.
  </silk:ModalBody>
  <silk:ModalFooter>
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </silk:ModalFooter>
</silk:Modal>

Modal with no header.

For this case, the title property should not be provided. The property limitClose is set to true, allowing the modal to close when clicked outside the dialog.

<silk:Modal id="myModal" >
  Contains: SilkBbuilder components and HTML.
</silk:Modal>

Properties

^*Required property.

id^*

The modal's unique identifier. Default Value: Empty.

title

The text that will be used as the modal's title. If not included, the modal is displayed without the top header bar. Default Value: Empty.

closeButton

Defines if the modal will be closed when the user clicks outside the modal dialog. By default, the modal only closes when the "X" icon is clicked or when a close modal button is added. Default Value: false.

helpButton

Will disable the help icon used to display interface explanations. Default Value: false.

size

Defines the modal size. The values are: small, large, extra, width, and full. The "width" value will create a model contained within the width of the page. The "full" modal will completely cover the screen width and height. Any other value will be used as the class name defining the modal size. Default Value: Empty.

centered

Centers the modal in the navigator screen. Default Value: true.

limitedClose

Define if the modal will not close when the user clicks outside the modal dialog. By default the modal only closes when click on the "X" icon or when a close modal button is added. Default Value: true.

bodyMargin

Removes the modal's body margin. This is particularly helpful when components like a silk:Table or images are part of a modal. Default Value: true.

renderIf

It contains the logic sentence defining whether the component should be rendered. The logic statement's explanation is in the Server Code Logic documentation. Default Value: Empty.