The layer module within the Layui framework provides a lightweight and highly configurable solution for rendering overlays, dialogs, and toast notifications in web applications. Among its methods, layer.msg() is specifically designed for brief, non-intrusive prompt messages that automatically dismiss after a set duration.

Core Syntax and Configuration

The method accepts three primary arguments: the message content, an optional configuration object, and an optional callback function triggered upon dismissal. While legacy implementations occasionally passed numeric arguments directly for duration and icon type, the recommended approach utilizes a configuration object for imprvoed readability and maintainability.

// Basic toast notification
layer.msg('Operation completed successfully');

// Toast with custom icon and auto-close duration
layer.msg('Please verify your input', {
    icon: 5,
    time: 3000
});

// Toast with execution callback after closing
layer.msg('Data synchronized', {
    icon: 1,
    time: 2000
}, function() {
    console.log('Toast dismissed, proceeding to next step.');
});

Alternative: Full Modal Dialogs

When user interaction or complex content is required, layer.open() serves as the primary modal constructor. Below is a restructured example demonstrating custom buttons, styling, and DOM manipulation upon successful rendering.

layer.open({
    type: 1,
    title: 'System Notification',
    closeBtn: 1,
    area: ['420px', 'auto'],
    shade: 0.6,
    id: 'modal_unique_identifier',
    resize: false,
    btn: ['Proceed', 'Cancel'],
    btnAlign: 'c',
    moveType: 1,
    content: '<div style="padding: 20px; background: #2c3e50; color: #ecf0f1; line-height: 1.6;">Review the details before continuing.</div>',
    success: function(domElement) {
        const actionBtn = domElement.find('.layui-layer-btn0');
        actionBtn.attr({
            href: 'https://example.com/docs',
            target: '_blank'
        });
    }
});

Practical Implementation: Asynchronous State Updates

Integrating toast prompts with asynchronous requests allows developers to provide immediate feedback during state transitions. The following example demonstrates a confirmation prompt that triggers an AJAX request, handles server responses, and redirects conditionally.

function toggleUserStatus(recordId) {
    layer.msg('Are you sure you want to update this record?', {
        time: 8000,
        shade: 0.4,
        btn: ['Confirm Update', 'Abort'],
        yes: function() {
            $.ajax({
                url: '/api/users/update-status',
                type: 'POST',
                data: { userId: recordId },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        layer.msg(response.message, { icon: 1, time: 1500 }, function() {
                            if (response.redirectUrl) {
                                window.location.assign(response.redirectUrl);
                            }
                        });
                    } else {
                        layer.msg(response.message || 'Update failed', { icon: 2, time: 2000 });
                    }
                },
                error: function() {
                    layer.msg('Network error. Please try again.', { icon: 2, time: 2000 });
                }
            });
        }
    });
}