### Modal Dialog Message

Example of a Message Dialog using W3.CSS style in a B4J Server application.
As taken from this B4J HowTo Example:
107. WebApp showing Dialogs with W3.CSS styling
Documentation on request.
More information about W3.CSS modal dialogs:
http://www.w3schools.com/w3css/w3css_modal.asp
HTML Code
<!-- Define the Button to start the message dialog with the id = messagedialog -->
<button onclick="document.getElementById('messagedialog').style.display='block'" class="w3-btn w3-yellow w3-round-xxlarge" id="btnmessagedialog" title="Message Dialog">Message Modal Dialog</button>
<!-- Define the messagedialog with the id = messagedialog -->
<!-- There are 3 selectors defined (messagedialogheader, messagedialogcontent, messagedialogfooter which are populated by the B4J code -->
<!-- MESSAGEDIALOG START -->
<div id="messagedialog" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('messagedialog').style.display='none'" class="w3-closebtn">×</span>
<h3 id="messagedialogheader"></h3>
</header>
<div class="w3-container w3-sand" id="messagedialogcontent">
</div>
<footer class="w3-container w3-teal">
<div class="w3-medium" id="messagedialogfooter">
</div>
</footer>
</div>
</div>
<!-- MESSAGEDIALOG DIALOG END -->
B4J Code
`Sub Class_Globals
...
'Message Modal Dialog - Define the jqueryelements which must have the same name as the selectors in the HTML code
Private messagedialogheader As JQueryElement
Private messagedialogcontent As JQueryElement
Private messagedialogfooter As JQueryElement
...
End Sub`
'Handle click from the button with id="btnmessagedialog" as defined in HTML
`Sub btnMessageDialog_click(params As Map)
Log(DateTime.Time(DateTime.Now) & " :: btnMessageDialog clicked")
'Message Dialog set the text
messagedialogheader.SetHTML("My Header")
messagedialogcontent.SetHTML("My Content
and more...")
messagedialogfooter.SetHTML("My Footer")
End Sub`

Changed: 2018-06-07 09:33, Category: WebApps W3 CSS, File: T6C283M2121.htm, ID: 2121