What is Prompt Widget in Magento 2

Prompt Widget Magento 2 allows showing a modal pop-up window with an input field, and a cancel and a confirmation button.

Prompt Widget Magento 2 allows showing a modal pop-up window with an input field, and a cancel and a confirmation button and it also extends the Magento modal widget. The origin of Magento 2 prompt widget is <Magento_Ui_module_dir>/view/base/web/js/modal/prompt.js.

Using the Magento 2 Widget means you can work with the prompt window for Admin and storefront. By this way, the design patterns for the modal pop-up windows in the Admin are defined in the Magento Admin Pattern Library, the Slide-out Panels, Modal Windows, and Overlays topic.

There are two ways to initialize the Magento 2 prompt widget

Initialization on an element

$('#prompt_init').prompt({
    title: 'Prompt title',
    actions: {
        confirm: function(){}, //callback on 'Ok' button click
        cancel: function(){}, //callback on 'Cancel' button click
        always: function(){}
    }
});

Standalone Initialization

require([
    'Magento_Ui/js/modal/prompt'
], function(prompt) { // Variable that represents the `prompt` function
 
    prompt({
        title: 'Some title',
        content: 'Some content',
        actions: {
            confirm: function(){},
            cancel: function(){},
            always: function(){}
        }
    });
 
});

actions

Widget callbacks.

Type: Object.
Default value:

actions: {
    confirm: function(){},
    cancel: function(){},
    always: function(){}
}

autoOpen

Automatically open the prompt window when the widget is initialized.

Type: Boolean
Default value: false

clickableOverlay

Close the prompt window when a user clicks on the overlay.

Type: Boolean

Default value: true

content

The prompt window content.

Type: String.

focus

Allow focusing on the selector of the element if the prompt window opens. In case the focusoption is not specificed or empty, the focus is on the close button. And if the focus is optional, please set focus to none.

Type: String.
Default value: ''

title

The title of the prompt window.

Type: String.
Default value: ''

Related Post

Previous Add an URL Rewrite

Next Rewrite Controller

One Step Checkout for Magento 2 by Mageplaza

magento-2-tutorial

prompt

widget

Sam Thomas

CEO and Founder of Mageplaza. Pursueing a simple and healthy lifestyle. A friend, a husband and a dad of two children, a trainer and an influencer wannabe. He is a big fan of sports and travel, also.