Prompt Widget in Magento 2: What Is It & How to Initialize?
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.
Initialize Prompt Widget
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(){}
}
});
});
Prompt Widget Options
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 focus
option 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
- How to create a simple Hello World module for Magento 2
- Magento 2 Block Template Ultimate Guides
- How to Create Module in Magento 2
- How to Create Controller in Magento 2
- How to create CRUD Models in Magento 2
- How to Create Magento 2 Block, Layout and Templates
- Configuration - System.xml
- How To Create Admin Menu In Magento 2
- Admin ACL
- Admin Grid
People also searched for
- magento 2 prompt widget
- command magento 2 prompt widget
- magento 2 idl prompt widget
- magento 2 awesome widget prompt
- magento 2 qt promote widget
- magento 2 qt promote widget programmatically
- magento 2 qt promote widget in code
- 2.3.x, 2.4.x