Confirm
Notiflix Confirm module can be used to show non-blocking confirm/prompt boxes. This module includes 3 types of confirm/prompt: "Show", "Ask", and "Prompt". An additional question can be asked within the prompt box if using the "Ask" and/or "Prompt" ones unlike the "Show" one.
(A) Import as a Module
import { Confirm } from 'notiflix/build/notiflix-confirm-aio';(B) Add to an HTML page (Global)
(B1) Confirm Module, only JS (All in One => Internal CSS)<script src="dist/notiflix-confirm-aio-X.X.X.min.js"></script>(B2) All Modules, CSS and JS<link rel="stylesheet" href="dist/notiflix-X.X.X.min.css" /><script src="dist/notiflix-X.X.X.min.js"></script>(B3) All Modules, only JS (All in One => Internal CSS)<script src="dist/notiflix-aio-X.X.X.min.js"></script>Playground
Confirm.show();
This method can be used to show a confirm box with info, and take the custom actions via the callback functions.
The title, the message/question, the OK button text, and the Cancel button text are the first four parameters in string format. The fifth and the sixth parameters are callback functions that are related to the OK and the Cancel button elements in order. The seventh and last parameter is the options parameter that extending the initialize options with the new options for each confirm box. Whether these parameters are Required or Optional is explained in the comments below.
Usage
@param1 {string}: Required, title text in string format.@param2 {string}: Required, message/question in string format.@param3 {string}: Required, OK button text in string format.@param4 {string}: Optional, Cancel button text in string format.@param5 {function}: Optional, a callback function that will be called when the OK button element has been clicked.@param6 {function}: Optional, a callback function that will be called when the Cancel button element has been clicked.@param7 {Object}: Optional, extending the initialize options with new the options for each confirm box.Confirm.show('Notiflix Confirm','Do you agree with me?','Yes','No',() => {alert('Thank you.');},() => {alert('If you say so...');},{Custom options},);Notiflix Confirm
Do you agree with me?
Demo
Confirm.show('','','','',() => {alert('');},() => {alert('');},);Confirm.ask();
This method can be used to ask a question within a confirm box. The confirm box doesn't remove till the client gives the correct answer. Or, the client can click on the cancel button to close/remove the confirm box as well.
The title, the question, the answer to the question, the OK button text, and the Cancel button text are the first fifth parameters in string format. The sixth and the seventh parameters are callback functions that are related to the OK and the Cancel button elements in order. The eighth and last parameter is the options parameter that extending the initialize options with the new options for each confirm box. Whether these parameters are Required or Optional is explained in the comments below.
Usage
@param1 {string}: Required, title text in string format.@param2 {string}: Required, question text in string format.@param3 {string}: Required, answer text in string format.@param4 {string}: Required, OK button text in string format.@param5 {string}: Optional, Cancel button text in string format.@param6 {function}: Optional, a callback function that will be called when the OK button element has been clicked.@param7 {function}: Optional, a callback function that will be called when the Cancel button element has been clicked.@param8 {Object}: Optional, extending the initialize options with new the options for each confirm box.Confirm.ask('Where is Padmé?','Is she safe? Is she all right?','It seems, in your anger, you killed her.','Answer','Cancel',() => {alert('😡 NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!!!');},() => {alert('😪 ...');},{Custom options},);Where is Padmé?
Is she safe? Is she all right?
Demo
Confirm.ask('','','','','',() => {alert('');},() => {alert('');},);Confirm.prompt();
This method works similarly as "window.prompt()". The client doesn't have to type a correct answer to the input element to proceed unlike the "ask()" method. The client answer passes to the callback functions as a parameter and this parameter is always a string.
The title, the question, the default answer to the question, the OK button text, and the Cancel button text are the first fifth parameters in string format. The sixth and the seventh parameters are callback functions that are related to the OK and the Cancel button elements in order. The eighth and last parameter is the options parameter that extending the initialize options with the new options for each confirm box. Whether these parameters are Required or Optional is explained in the comments below.
Usage
@param1 {string}: Required, title text in string format.@param2 {string}: Required, question text in string format.@param3 {string}: Required, default answer text in string format. An empty string can be used as well.@param4 {string}: Required, OK button text in string format.@param5 {string}: Optional, Cancel button text in string format.@param6 {function}: Optional, a callback function that will be called when the OK button element has been clicked.@param7 {function}: Optional, a callback function that will be called when the Cancel button element has been clicked.@param8 {Object}: Optional, extending the initialize options with new the options for each confirm box.Confirm.prompt('Hello','How are you feeling?','Awesome!','Answer','Cancel',(clientAnswer) => {alert('Client answer is: ' + clientAnswer);},(clientAnswer) => {alert('Client answer was: ' + clientAnswer);},{Custom options},);Hello
How are you feeling?
Demo
Confirm.prompt('','','','','',);