Alerts show up in pop-up windows and remain there until the user closes them. While an alert is displayed, the user is unable to use the application. Use pop-up alerts if you need user interaction or the message is of high importance.
In JBStrap, you can use the following alert types:
- Say – A plain text message meant to “say” something to the user. The user can only acknowledge the message by clicking OK. A ' say' alert does not interrupt program execution.
- Error –A plain text message notifying the user of an error. The program execution is not interrupted.
- Ask –Use this to ask the user a Yes/No question. Program execution will be interrupted. The user response is received as a Boolean value ( true for ‘Yes’ and false for ‘No’).
- Input – This pop-up window prompts the user to enter some text. Program execution is interrupted until the user action is received. User response is stored as a string value. If the user clicks OK without entering any text, the result will be an empty string. If the user presses ESC or clicks ‘Cancel’, the result will be a NULL value.
Plain information message:
User input message:
Notifications appear in the upper right corner of the interface only for a short period of time and then automatically disappear. When several such messages are queued to get displayed, they will be listed below one another. You can keep them on the screen by just holding the mouse over them. Use a notification to display some information of lower importance to the user (program execution will proceed uninterrupted).
Here are the four types of notifications used in JBStrap:
- Success – Use this one notify the user of a successful operation.
- Info – Use this one to display information.
- Warning – Use this one to display warning messages.
- Error – Use this one to display error messages.
Display a warning message:
Display an error message:
|$toastr-color||$white||-||#fff||Toast font color|
|$toastr-hover-color||$gray-400||-||$gray-400||Toast hover color|
|$toastr-warning-color||$body-color||-||$gray-900||Toast warning color|
|$toastr-width||$font-size-base * 23||-||23 rem||Toast width|
|$toastr-shadow||0 0 $font-size-base $gray-600||-||0 0 1 $gray-600||Toast shadow|
|$toastr-hover-shadow||$floating-shadow||0 0 1.875rem rgba($black, 0.1)||0 0 1.875rem rgba(#000, 0.1)||Toast hover shadow|
|$toastr-border-radius||$border-radius||-||$border-radius||Rounded toast corners|