[OBSOLETE] How to use the same dxPopup or another widget on different views

[Updated by Uriah (DevExpress Support)]
To show a dxPopup instance from different views, we suggest implementing it using the dxView markup component with the modal option set to true. An application displays this view in a popup window. If you decide to use this approach, make sure that you added the Popup Layout to your application.

Implementation details are provided in a corresponding tutorial: Login When Navigating to a View. This approach is handy when you need to frequently prompt users to input data using a modal dialog window.

The approach described above is not always appropriate. If you want to display a simple notification or alert, consider using built-in functions provided in the DevExpress.ui namespace:
DevExpress.ui.notify - displays a toast message;
DevExpress.ui.dialog.alert - displays an alert dialog message;
DevExpress.ui.dialog.confirm - displays a confirmation dialog;
DevExpress.ui.dialog.custom - displays a custom dialog;

If the functionality provided by these functions is not sufficient, it is possible to declare your own functions that create appropriate widgets and display them. Here is the list of widgets that can be used:
dxActionSheet - provides a set of choices related to a certain task;
dxLoadPanel - indicates that loading is in progress;
dxPopover, dxPopup - display the content in a popup window;
dxToast - displays a toast message;

We suggest adding these functions to a global application scope. This allows invoking them from any view.

JavaScript
(function ($, ns) {  
    ns.controller = {  
        showActionSheet: function() {  
            /* your code goes here */  
        }  
    };  
})(jQuery, DxSample || {});  

Now I will tell how to create a widget. There should be a DOM element to which this widget will be attached. This is not a problem, because it is not difficult to create an empty <div> element and append it to the document body.

JavaScript
var $actionSheet = $('<div>').dxActionSheet({ items: items });  
var actionSheet = $actionSheet.dxActionSheet('instance');  

$(function () { $actionSheet.appendTo($('body')); });  

Here is complete code:

JavaScript
(function ($, ns) {  
    function showActionSheet() {  
        actionSheet.show();  
    }  

    function showDetails() {  
        ns.app.navigate('about', { root: true });  
    }  

    function logout() {  
        DevExpress.ui.notify('You have been logged out', 'info', 1000);  
    }  

    var items = [  
        { text: 'My Details', onClick: showDetails },  
        { text: 'Logout', type: 'danger', onClick: logout }  
    ]  

    var actionSheet;  
    $(function () {  
        var $actionSheet = $('<div>').appendTo($('body')).dxActionSheet({ items: items });  
        actionSheet = $actionSheet.dxActionSheet('instance');  
        ns.controller = {  
            showActionSheet: showActionSheet  
        };  
    });  
})(jQuery, DxSample || {});  

In addition, the working example is provided in the attachment.