Modal (Bootstrap): Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
No edit summary
Line 3: Line 3:
== Description ==
== Description ==


Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
A Modal control displays a panel of information above your app. It can contain a header, detail or footers. By default, it is hidden, so it cannot be seen in the Design Screen. It needs to opened using
<pre>
  $("#Modal1").modal("toggle")
</pre>


It can also act as a container for child controls.
It can also act as a container for child controls.
Line 12: Line 15:
{| class="wikitable"
{| class="wikitable"
|-
|-
| center || Should image be centered in container?
| badge || Adds a Badge to the control. Design Time and Runtime.
|-
|-
| header || The heading in the control.
| footer || The text on the bottom. Leave blank for none. Design Time and Runtime.
|-
|-
| imageAlignment || Position of the image. top, middle or bottom.
| footerAlign || Alignment of footer contents. left, center or right. Design time.
|-
|-
| imageHorizontal || Position of the image. left or right.
| header || The heading in the control. Leave blank for none. Design Time and Runtime.
|-
|-
| position || How will the children be positioned? absolute, fixed, relative or static.
| size || Size of Modal control. small, medium or large.
|-
|-
| responsive || Should image resize to container?
| toggle() || Show or hide the Model panel.
|-
-
| shape || The shape of the icon. thumbnail, rounded or circle.
| value || The text in the center of the control. Leave blank for none. Design Time and Runtime.
|-
| position || How will children be positioned? Absolute, fixed, relative or static.
|-
| src || Filename of Image. Set to empty for none. Can be .png, gif, bmp or jpg.
|-
| value || The sub text. Leave blank for none.
|}
|}



Revision as of 20:21, 5 June 2016

Description

A Modal control displays a panel of information above your app. It can contain a header, detail or footers. By default, it is hidden, so it cannot be seen in the Design Screen. It needs to opened using

  $("#Modal1").modal("toggle")

It can also act as a container for child controls.

Properties and Methods

Standard properties are supported, plus:

badge Adds a Badge to the control. Design Time and Runtime.
footer The text on the bottom. Leave blank for none. Design Time and Runtime.
footerAlign Alignment of footer contents. left, center or right. Design time.
header The heading in the control. Leave blank for none. Design Time and Runtime.
size Size of Modal control. small, medium or large.
toggle() Show or hide the Model panel.

-

value The text in the center of the control. Leave blank for none. Design Time and Runtime.

Events

Standard events are supported.

Example (BASIC)

Function Media1_onclick()
  MsgBox "Media1 clicked!"
End Function

Example (JavaScript)

Media1.onclick = function() {
    NSB.MsgBox("Media1 clicked!");
};

Output