Toast mesage alert for visualforce page

Question

Any help on how to create an toast message alert on my visualforce page

<apex:page controller="MycustomSettingController" lightningStyleSheets="true" >
<apex:slds />
<div class="slds-scope">
    <div class="myapp">     
        <div class="slds-grid slds-wrap">
            <div id="divMainContainer" style="display:flex" class="slds-col slds-size--4-of-4" >
                <div  class="slds-box slds-box_xx-small slds-text-align_center slds-m-around--xx-Large">
                    <apex:form >
                        <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">Org Information</div>                                               
                        <apex:pageBlock >
                            Client ID: <br/><apex:inputField value="{!orgInfo.Client_ID__c}" required="true"/><br/>
                            Client Secret: <br/><apex:inputField value="{!orgInfo.Client_Secret__c}" required="true"/><br/>
                            Username: <br/><apex:inputField value="{!orgInfo.Username__c}" required="true"/><br/>
                            Password: <br/><apex:inputField value="{!orgInfo.Password__c}" required="true"/><br/> <br/>
                            Sandbox? <apex:inputCheckbox value="{!orgInfo.Sandbox__c}"/><br/><br/>
                            <br/>
                            <apex:commandButton styleClass="slslds-button slds-button_success" action="{!save}" value="Save"/>
                        </apex:pageBlock>    
                    </apex:form>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

You can use below code to show Toast Message in VF Page.

<apex:page >
<apex:slds />
<script>
function toastLaunch(){
    var element = document.getElementById("ToastMessage");
    element.classList.toggle("slds-hidden");
}
</script>

<div class="demo-only slds-hidden" style="height: 4rem;" id='ToastMessage'>
    <div class="slds-notify_container slds-is-relative">
        <div class="slds-notify slds-notify_toast slds-theme_success" role="alert">
            <span class="slds-assistive-text">success</span>
            <span class="slds-icon_container slds-icon-utility-success slds-m-right_small slds-no-flex slds-align-top" title="Description of icon when needed">
                <svg class="slds-icon slds-icon_small" aria-hidden="true">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#success')}" />
                </svg>
            </span>
            <div class="slds-notify__content">
                <h2 class="slds-text-heading_small ">Account <a href="javascript:void(0);">ACME - 100</a> widgets was created.</h2>
            </div>
            <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close" onclick='toastLaunch()'>
                <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#close')}" />
                </svg>
                <span class="slds-assistive-text">Close</span>
            </button>
        </div>
    </div>
</div>
<button class="slds-button slds-button_brand" onclick='toastLaunch()'>
    Show Toast
</button>

If you want to use in Lightning,use $A.get("e.force:showToast")