JQuery Modals

If the page your editing extends from _Layout or _Leanbase you don't need to import any additional modules.

If the page does not extend from _Layout or _Leanbase, you need to include the following on your page: 


        Html.RenderPartial("~/Views/Shared/Dialog.cshtml");

To make a Roblox Dialog appear add a call to the module in your javascript file.

To give the modal content you must pass in a JSON object with the list of Modal Dialog Parameters. 

    
        Roblox.Dialog.open({
            [YOUR MODAL PARAMETERS HERE]
        });
Modal Parameters
Parameter Type Description Default

Examples

The following are simple examples of using the Roblox Dialog with the modal parameters.


Simple modal dialog with text, body content and footer text.

Example: 
    
    $("#modal-jquery-simple-button").click(function () {
        Roblox.Dialog.open({
            titleText: "Simple Modal",
            bodyContent: "This is the content of the simple modal",
            footerText: "This is the footer text",
            acceptText: "Accept",
            declineText: "Decline",
            xToCancel: true
        });
    });

Modal dialog with basic callback functions. Define callback functions and pass them in as parameters to Roblox Dialog

Example: 
    
    $("#modal-jquery-callback-button").click(function () {
        Roblox.Dialog.open({
            titleText: "Modal with Callbacks",
            bodyContent: "This modal will perform actions based on what you choose",
            acceptText: "Accept",
            declineText: "Decline",
            xToCancel: true,
            onAccept: acceptCallback,
            onDecline: declineCallback, 
            onCancel: cancelCallback,
            onCloseCallback: cancelCallback
        });
    });

    function acceptCallback() {
        simpleJqueryCallbackResult.text("User clicked accept");
    }

    function declineCallback() {
        simpleJqueryCallbackResult.text("User clicked decline");      
    }

    function cancelCallback() {
        simpleJqueryCallbackResult.text("User cancelled out of modal");      
    }

Modal with checkbox agreement that user must click before they are able to click the accept button.

Example: 
    
    $("#modal-jquery-checkbox-button").click(function () {
        Roblox.Dialog.open({
            titleText: "Modal with Checkbox Agreement",
            bodyContent: "A long list of rules the user must read and accept to follow.",
            acceptText: "Accept",
            declineText: "Decline",
            xToCancel: true,
            checkboxAgreementRequired: true,
            checkboxAgreementText: "I have read and understand everything"
        });
    });

Modal with validation. Calls the "onAccept" callback function BEFORE closing the dialog. Modal dialog will only close if the "onAccept" method returns true.

Example: 
    
    $("#modal-jquery-validation-button").click(function () {
        Roblox.Dialog.open({
            titleText: "Modal with Validation",
            bodyContent: "",
            footerText: "Accept with not work if you have not entered text",
            acceptText: "Accept",
            showDecline: false,
            xToCancel: true,
            allowHtmlContentInBody: true,
            fieldValidationRequired: true,
            onAccept: validationCallback
        });
    });
        
    function validationCallback() {
        var validationText = $("#modal-jquery-validation-text");
        if (validationText && validationText.val()) {
            // perform some action upon validation success
            return true;
        } else {
            // validation has failed so modal will not close
            validationText.addClass("sg-red-2");
            return false;
        }
    }
Note: The modals will NOT save the state/data between different calls to open the modal dialog. This is expected functionality from the underlying simple modal library we use. This can be especially problematic for "lazy-loading" images. If you need to persist data between calls to open the dialog you may need to override simple modal's "persist" attribute. (If neccessary we can expose this in the Roblox Dialog module.)