Mini Kabibi Habibi

<div data-options="dxView : { name: 'Overlays', title: 'Overlays' } " >
    <div class="navigation" data-options="dxContent : { targetPlaceholder: 'content' } " >
      <div class="content" data-bind="dxScrollView: { }">
        <div class="dx-fieldset">
            <div class="dx-field">
                <div class="dx-field-label">Load Panel</div>
                <div class="dx-field-value">
                    <div data-bind="dxButton: { text: 'Show', clickAction: loadPanel.startLoading }"></div>
                </div>
            </div>
            <div class="dx-field">
                <div class="dx-field-label">Popup</div>
                <div class="dx-field-value">
                    <div data-bind="dxButton: { text: 'Show', clickAction: popup.showPopup }"></div>
                </div>
            </div>
            <div class="dx-field">
                <div class="dx-field-label">Action Sheet</div>
                <div class="dx-field-value">
                    <div data-bind="dxButton: { text: 'Show', clickAction: actionsheet.showActionSheet }"></div>
                </div>
            </div>
        </div>    
        <div class="dx-fieldset">
            <div class="dx-field">
                <div class="dx-field-label">Toast Info</div>
                <div class="dx-field-value">
                    <div data-bind="dxButton: { text: 'Show', clickAction: toast.showInfo }"></div>
                </div>
            </div>
            <div class="dx-field">
                <div class="dx-field-label">Toast Error</div>
                <div class="dx-field-value">
                    <div data-bind="dxButton: { text: 'Show', clickAction: toast.showError }"></div>
                </div>
            </div>
            <div class="dx-field">
                <div class="dx-field-label">Toast Success</div>
                <div class="dx-field-value">
                    <div data-bind="dxButton: { text: 'Show', clickAction: toast.showSuccess }"></div>
                </div>
            </div>
            <div class="dx-field">
                <div class="dx-field-label">Toast Warning</div>
                <div class="dx-field-value">
                    <div data-bind="dxButton: { text: 'Show', clickAction: toast.showWarning }"></div>
                </div>
            </div>
            <div class="dx-field">
                <div class="dx-field-label">Toast Custom</div>
                <div class="dx-field-value">
                    <div data-bind="dxButton: { text: 'Show', clickAction: toast.showCustom }"></div>
                </div>
            </div>
        </div>
      </div>
    <div data-bind="dxLoadPanel: { message: 'Please wait ...', visible: loadPanel.visible }"></div>
    <div id="popup" data-bind="dxPopup: { }">
        <div class="dx-clearfix" data-options="dxTemplate : { name: 'title' } ">
            <div class="title-button" data-bind="dxButton: { icon: 'close', clickAction: popup.hidePopup }"></div>
            <h2>Sunrise</h2>
        </div>
        <div data-options="dxTemplate : { name: 'content' } ">
            <div class="popup-content"><img src="./content/images/gallery/sunrise.jpg" width="100%"/></div>
        </div>
    </div>

    <div id="action_sheet" data-bind="dxActionSheet: { title: 'Action Sheet', items: actionsheet.items, showTitle: true }"></div>
    <div id="toast-info" data-bind="dxToast: { message: 'Sample info message', type: 'info' }"></div>
    <div id="toast-error" data-bind="dxToast: { message: 'Sample error message', type: 'error' }"></div>
    <div id="toast-success" data-bind="dxToast: { message: 'Sample success message', type: 'success' }"></div>
    <div id="toast-warning" data-bind="dxToast: { message: 'Sample warning message', type: 'warning' }"></div>
    <div id="toast-custom" data-bind="dxToast: { type: 'custom' }">
        <div class="dx-icon dx-icon-user"></div>
        New user added!
    </div>
        
        
    </div>
</div>