### Modal Dialog Confirmation

Example of a Confirmation 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 = confirmdialog -->
<button onclick="document.getElementById('confirmdialog').style.display='block'" class="w3-btn w3-green w3-round-xxlarge" id="btnconfirmdialog" title="Confirm Dialog">Confirm Modal Dialog</button>
<!-- Define the confirmationdialog with the id = confirmationdialog -->
<!-- There are 2 selectors defined (confirmdialogheader, confirmdialogcontent are populated by the B4J code -->
<!-- There are also 2 buttons which events are handled by the B4J code -->
<!-- CONFIRMDIALOG START -->
<div id="confirmdialog" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-teal">
<!-- <span onclick="document.getElementById('confirmdialog').style.display='none'" class="w3-closebtn">×</span> -->
<h3 id="confirmdialogheader"></h3>
</header>
<div class="w3-container w3-sand" id="confirmdialogcontent">
</div>
<footer class="w3-container w3-teal">
<div class="w3-padding-large">
<button onclick="document.getElementById('confirmdialog').style.display='none'" class="w3-btn w3-right w3-red w3-round-xxlarge" id="btnconfirmdialogno" title="NO">NO</button>
<button onclick="document.getElementById('confirmdialog').style.display='none'" class="w3-btn w3-green w3-round-xxlarge" id="btnconfirmdialogyes" title="YES">YES</button>
</div>
</footer>
</div>
</div>
<!-- CONFIRMDIALOG DIALOG END -->
B4J Code
`Sub Class_Globals
...
Private confirmdialogheader As JQueryElement
Private confirmdialogcontent As JQueryElement
...
End Sub`
Region ConfirmDialog
`Sub btnConfirmDialog_click(params As Map)
Log(DateTime.Time(DateTime.Now) & " :: btnConfirmDialog clicked")
'Message Dialog
confirmdialogheader.SetHTML("ConfirmDialog Header")
confirmdialogcontent.SetHTML("ConfirmDialog Content
Select Yes or No to confirm.")
End Sub`
'Handle the buttons YES and NO from the ConfirmDialog
`Sub btnConfirmDialogYes_click(params As Map)
Log(DateTime.Time(DateTime.Now) & " :: btnConfirmDialogYes clicked")
End Sub`
`Sub btnConfirmDialogNo_click(params As Map)
Log(DateTime.Time(DateTime.Now) & " :: btnConfirmDialogNo clicked")
End Sub`
End Region

Changed: 2018-06-07 09:29, Category: WebApps W3 CSS, File: T6C283M2120.htm, ID: 2120