Skip to main content

Status Modal - Usage Guide

alt text alt text alt text

How to Use​

1. Include the Partial in Your View​

Add this line anywhere in your view (typically at the bottom before closing tags):

@await Html.PartialAsync("_StatusModal")

Or using the shorter syntax:

<partial name="_StatusModal" />

2. Call the Modal from JavaScript​

Use the showStatusModal() function with your desired options:

With Action Button​

showStatusModal({
  type: "success",
  title: "تم الحفظ بنجاح",
  titleColor: '#212529bf',
  message: "هل تريد الانتقال إلى الصفحة الرئيسية؟",
  messageStyle: {},
  showActionButton: true,
  actionButtonText: "تأكيد",
  onConfirm: function () {
    // Handle action logic
  },
  onCancel: function () {
    // Handle cancel action if needed
  },
});

Available Options​

OptionTypeDefaultDescription
typestring'success'Modal type: 'success', 'info', 'error'
titlestring'empty string'Main title text [bold text]
titleColorstring'#212529bf'Title color
messagestring'empty string'Optional message below title
messageStyleobject{}Optional message style
showActionButtonbooleanfalseShow/hide the action button
actionButtonTextstring'تأكيد'Text for action button
onConfirmfunctionnullCallback when confirm button is clicked
onCancelfunctionnullCallback when [cancel, close] button is clicked

Complete Example in a View​


<div class="container">
    <h1>My Page Content</h1>

    <button onclick="handleStatusModal()"
    class="btn btn-primary">Test Success</button>
</div>

@* Include the modal partial *@
<partial name="_GenericStatusModal" />

@section Scripts {

    <script>
        function handleStatusModal() {
            showStatusModal({
                type: "info",
                title: "تم الحفظ بنجاح",
                titleColor: '#212529bf',
                message: "هل تريد الانتقال إلى الصفحة الرئيسية؟",
                messageStyle: {},
                showActionButton: true,
                actionButtonText: "تأكيد",
                onConfirm: function () {
                    console.log('onConfirm triggered!');
                },
                onCancel: function () {
                    console.log('onCancel triggered!');
                },
            });
        }
    </script>

}
ParameterTypeDescriptionDefault Value
typestringThe type of the modal'success'
titlestringThe title of the modal'empty string'
messagestringThe message of the modal'empty string'
showActionButtonbooleanWhether to show the action button or notfalse
actionButtonTextstringThe text of the action button'تأكيد'
onConfirmfunctionThe callback function when the confirm button is clickednull
onCancelfunctionThe callback function when the cancel button is clickednull

Screenshots​

alt text

alt text

alt text