### Show Popup Dialog Connected Clients

This example uses a w3.css modal dialog to show an alert in a popup window send to all connected clients.
The color of the dialog is set depending on the type of message.
More about w3csss alerts, see www.w3schools.com/w3css/w3css_alerts.asp .
The comprehensive example can be found:
146. Webserver enabling connected clients to send popup messages displayed on each browser (20161011)
Documentation on request.
HTML define the Dialogs (index.html)
There are two dialogs defined in the file index.html, one to create and send the message and the other to show the message.
Create & send the message.
Several elements are defined (ID="") which are used by the B4J Class webpopupmessage.bas (defined as jqueryelement):
dlgpopupmessagecreate = the dialog message which is called.
inputpopupmessagetitle = the message title displayed in HTML H3 tag.
inputpopupmessagetext = The message text displayed in HTML P tag.
timeoptionpopupmessage = The option to include the time in the message.
alerttypeinfo = the type info resulting in a blue message.
alerttypewarning = the type warning resulting in a red message.
<!-- MODAL DIALOG POPMESSAGEMESSAGECREATE BEGIN -->
<div id="dlgpopupmessagecreate" class="w3-modal">
<div class="w3-modal-content w3-card-8">
<div class="w3-container">
<span onclick="document.getElementById('dlgpopupmessagecreate').style.display='none'" class="w3-closebtn">×</span>
<header class="w3-container w3-theme">
<h4>Send Message</h4>
</header>
<div class="w3-input-group">
<label class="w3-label w3-text-teal"><b>Message Title:</b></label>
<input class="w3-input w3-border w3-light-grey" type="text" id="inputpopupmessagetitle">
<label class="w3-label w3-text-teal"><b>Message Text:</b></label>
<input class="w3-input w3-border w3-light-grey" type="text" id="inputpopupmessagetext">
</div>
<p>
<input class="w3-check" type="checkbox" checked="checked" id="timeoptionpopupmessage">
<label class="w3-validate">Include Time</label></p>
<p>
<div class="w3-row">
<input class="w3-radio" type="radio" name="alerttype" id="alerttypeinfo" value="info" checked>
<label class="w3-validate">Info</label></p>
<input class="w3-radio" type="radio" name="alerttype" id="alerttypewarning" value="warning">
<label class="w3-validate">Warning</label></p>
</div>
<button class="w3-btn-block w3-green w3-section w3-padding" onclick="document.getElementById('dlgpopupmessagecreate').style.display='none'" id="btndlgpopupmessagesend">Send</button>
</div>
</div>
</div>
<!-- MODAL DIALOG MESSAGE END -->
Show the message
The element dlgpopupmessagetypeshow is used to show or hide the dialog.
The message content is shown by the element popupmessage which is build out of the previous dialog elements.
The class w3-panel gets an ID, which is used to set the property class="w3-panel w3-color".
The default is
.
<!-- MODAL DIALOG POPUPMESSAGESHOW BEGIN -->
<div id="dlgpopupmessageshow" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-panel w3-blue" id="dlgpopupmessagetype">
<span onclick="document.getElementById('dlgpopupmessageshow').style.display='none'" class="w3-closebtn">×</span>
<p id="popupmessage"></p>
</div>
</div>
</div>
<!-- MODAL DIALOG POPUPMESSAGESHOW END -->
Script to show the message and hide when either clicking on the top right or an any area in the browser window.
// Get the modal popupmessage
var popupmessage = document.getElementById('dlgpopupmessageshow');
// Show the popupmessage by making the dialog popupmessage visible
function showpopupmessage() {
popupmessage.style.display='block';
}
// When the user clicks anywhere outside of the modal popupmessage, close it
window.onclick = function(event) {
if (event.target == popupmessage) {
popupmessage.style.display = 'none';
}
}
B4J Code to set the color of the w3-class
Just a snippet. See the project example mentioned earlier for details.
' Send the message to each connected client browser.
' The color of the message has to be defined prior showing the message in sub ShowPopUpMessage.
`Private Sub btndlgpopupmessagesend_Click(params As Map)
' Build the message
Dim msg As String
Dim title As String = inputpopupmessagetitle.GetVal.Value
If title.Length > 0 Then msg = $"

### ${title}

"$
' Check if the include time option is selected. This is done by reading the property.
Dim btime As Boolean = timeoptionpopupmessage.GetProp("checked").Value
If btime Then
DateTime.TimeFormat = "HH:mm"
msg = $"${msg}${DateTime.Time(DateTime.Now)} "$
End If
msg = $"${msg}

${inputpopupmessagetext.GetVal.Value}

"$
Dim clr As String
If alerttypeinfo.GetProp("checked").Value Then
clr = "w3-blue"
End If
If alerttypewarning.GetProp("checked").Value Then
clr = "w3-yellow"
End If
' Send it
For Each wm As webpopupmessage In Main.ConnectedBrowsers.Keys
CallSubDelayed3(wm, "showpopupmessage", msg, clr)
Next
End Sub`
' Show the popup message in the browser window of all connected clients.
`Public Sub ShowPopUpMessage(msg As String, clr As String)
popupmessage.SetHtml(msg)
dlgpopupmessagetype.SetProp("class", $"w3-panel ${clr}"$)
ws.flush
Log($"${DateTime.Time(DateTime.Now)}: New message send from IP address ${RemoteIP}"$)
ws.RunFunction("showpopupmessage", Null)
ws.flush
End Sub`

Changed: 2018-06-07 09:32, Category: WebApps W3 CSS, File: T6C283M2123.htm, ID: 2123