Modal (Bootstrap) - Revision history

Ghenne: /* Description */

2021-10-22T17:11:39Z

Description

← Older revision		Revision as of 17:11, 22 October 2021
Line 5:		Line 5:
	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 its toggle function.		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 its toggle function.

	Since it does not display on the Design Screen, it can be difficult to edit. ~~There's an easy solution. Add 'display:block'~~ to the ~~style attribute~~. ~~Don't forget to remove~~ it ~~when you are done~~.		Since it does not display on the Design Screen, it can be difficult to edit. To add a control to a Modal, drag it anywhere onto the Design Screen. Then, in the Project Explorer, cut the new control and paste it into the Modal.

	Make it the bottom control in the list of controls in the Project Explorer. That will it will float over the other controls without affecting their placement.		Make it the bottom control in the list of controls in the Project Explorer. That will it will float over the other controls without affecting their placement.
Line 13:		Line 13:
	Keep its width set to 'auto'. Bootstrap will size it properly. Do not set the screenMode of the containing Form to Zoom.		Keep its width set to 'auto'. Bootstrap will size it properly. Do not set the screenMode of the containing Form to Zoom.

	Modal Options:		'''Modal Options'''

	{\| class="wikitable"		{\| class="wikitable"

Ghenne: /* Description */

2021-10-22T17:09:50Z

Description

← Older revision		Revision as of 17:09, 22 October 2021
Line 21:		Line 21:
	\|-		\|-
	\| keyboard		\| keyboard
	~~\| style="font-weight:bold;"~~ \| Closes the modal when escape key is pressed. Default is true. If set to false, the close X does not appear.		\| Closes the modal when escape key is pressed. Default is true. If set to false, the close X does not appear.
	\|-		\|-
	\| focus		\| focus

Ghenne: /* Description */

2021-10-22T17:09:32Z

Description

← Older revision		Revision as of 17:09, 22 October 2021
Line 18:		Line 18:
	\|-		\|-
	\| backdrop		\| backdrop
	\| Includes a modal-backdrop element. true/false/static~~<br />~~ for a backdrop which doesn't close the modal on click.		\| Includes a modal-backdrop element. true/false/static (for a backdrop which doesn't close the modal on click.)
	\|-		\|-
	\| keyboard		\| keyboard
	\| style="font-weight:bold;" \| Closes the modal when escape key is pressed. Default is true		\| style="font-weight:bold;" \| Closes the modal when escape key is pressed. Default is true. If set to false, the close X does not appear.
	\|-		\|-
	\| focus		\| focus

Ghenne: /* Description */

2021-10-22T17:07:31Z

Description

← Older revision		Revision as of 17:07, 22 October 2021
Line 35:		Line 35:
	parms.backdrop = "static"		parms.backdrop = "static"
	parms.keyboard = false		parms.keyboard = false
	parms.show = ~~talse~~		parms.show = false
	$("#Modal1").modal(parms)		$("#Modal1").modal(parms)
	</pre>		</pre>

Ghenne: /* Description */

2021-10-22T17:07:07Z

Description

← Older revision		Revision as of 17:07, 22 October 2021
Line 34:		Line 34:
	parms = {}		parms = {}
	parms.backdrop = "static"		parms.backdrop = "static"
	parms.keyboard = ~~False~~		parms.keyboard = false
	parms.show = ~~False~~		parms.show = talse
	$("#Modal1").modal(parms)		$("#Modal1").modal(parms)
	</pre>		</pre>

Ghenne: /* Description */

2021-10-22T17:06:13Z

Description

← Older revision		Revision as of 17:06, 22 October 2021
Line 17:		Line 17:
	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-
	! backdrop		\| backdrop
	! Includes a modal-backdrop element. true/false/static<br /> for a backdrop which doesn't close the modal on click.		\| Includes a modal-backdrop element. true/false/static<br /> for a backdrop which doesn't close the modal on click.
	\|-		\|-
	\| keyboard		\| keyboard

Ghenne: /* Description */

2021-10-22T17:05:41Z

Description

← Older revision		Revision as of 17:05, 22 October 2021
Line 12:		Line 12:

	Keep its width set to 'auto'. Bootstrap will size it properly. Do not set the screenMode of the containing Form to Zoom.		Keep its width set to 'auto'. Bootstrap will size it properly. Do not set the screenMode of the containing Form to Zoom.

			Modal Options:

			{\| class="wikitable"
			\|-
			! backdrop
			! Includes a modal-backdrop element. true/false/static<br /> for a backdrop which doesn't close the modal on click.
			\|-
			\| keyboard
			\| style="font-weight:bold;" \| Closes the modal when escape key is pressed. Default is true
			\|-
			\| focus
			\| Puts the focus on the modal when initialized. Default is true
			\|-
			\| show
			\| Shows the modal when initialized. Default is true
			\|}

			Sample code to modify Modal Options:
			<pre>
			parms = {}
			parms.backdrop = "static"
			parms.keyboard = False
			parms.show = False
			$("#Modal1").modal(parms)
			</pre>

			Sample code to modify the appearance of a Modal:
			<pre>
			tmp = Modal1_header.innerHTML
			tmp = tmp.substr(0, tmp.indexOf("</h4>") + 5)
			Modal1_header.innerHTML = tmp
			Modal1_header.style.justifyContent = "center"
			Modal1_title.style.textAlign = "center"
			Modal1_body.style.alignSelf = "center"
			</pre>

	== Properties and Methods ==		== Properties and Methods ==

Ghenne at 14:53, 10 March 2019

2019-03-10T14:53:56Z

← Older revision		Revision as of 14:53, 10 March 2019
Line 37:		Line 37:
	Standard [[events\|events]] are supported.		Standard [[events\|events]] are supported.

	== Example (BASIC~~) =~~=		== Example ==
	<~~pre~~>
			<tabber>
			JavaScript=
			<syntaxhighlight lang="JavaScript">
			// JavaScript
			Button1.onclick = function() {
			Modal1.toggle();
			};
			</syntaxhighlight>
			\|-\|
			BASIC=
			<syntaxhighlight lang="vb.net">
			' Basic
	Function Button1_onclick()		Function Button1_onclick()
	Modal1.toggle()		Modal1.toggle()
	End Function		End Function
	</~~pre~~>		</syntaxhighlight>
			</tabber>
	~~== Example (JavaScript) ==~~
	~~<pre>~~
	~~Button1.onclick = function() {~~
	~~Modal1.toggle();~~
	};
	</~~pre~~>

	== Output ==		== Output ==

Ghenne: /* Output */

2019-02-02T14:20:05Z

Output

← Older revision		Revision as of 14:20, 2 February 2019
Line 59:		Line 59:

	[[Category:Bootstrap]]		[[Category:Bootstrap]]

	~~[[Category:iWebKit]]~~

Ghenne: /* Properties and Methods */

2019-02-01T19:09:07Z

Properties and Methods

← Older revision		Revision as of 19:09, 1 February 2019
Line 20:		Line 20:
	\| badge \|\| Adds a Badge to the control. Design Time and Runtime.		\| badge \|\| Adds a Badge to the control. Design Time and Runtime.
	\|-		\|-
	\| footer \|\| The text on the bottom. Leave blank for none. HTML is allowed. Design Time and Runtime.		\| footer \|\| The text on the bottom. Leave blank for none. HTML is allowed. In Bootstrap 4, aligned right. Design Time and Runtime.
	\|-		\|-
	\| footerAlign \|\| Alignment of footer contents. left, center or right. Design time.		\| footerAlign \|\| Alignment of footer contents. left, center or right. Design time.
Line 30:		Line 30:
	\| toggle() \|\| Show or hide the Modal panel.		\| toggle() \|\| Show or hide the Modal panel.
	\|-		\|-
	\| value \|\| The text in the center of the control. Leave blank for none. HTML is allowed. Design Time and Runtime.		\| value \|\| The text in the center of the control. Leave blank for none. HTML is allowed. In Bootstrap 4, text will scroll if needed. Design Time and Runtime.
	\|}		\|}