1

Hi I want to show a confirm dialog as shown

enter image description here

can the do the same using Lightning CSS.

I know we can use onclick="return confirm('test');" but look and feel of the same is different. How should I achieve this easily using lightning?

  • 1
    Did you try Modals in Lightning Design System? – SE_User Nov 2 '16 at 9:49
1

I suggest you trigger an event with a callback function. Here is a light draft of what u could do.

MyComponent.helper :

 mycomponentHelperMethod(component,event)
    var callBack = function (dialogResult) {
          component.set('v.dialogResult',dialogResult);
    };
    var NewEvent = $A.get('e.c:EvtRequestDialog') ;
    NewEvent.setParams({
        'question' : 'TitleOfYourQuestion',
        'answerList' : 'yes','no',
        'callBack': callBack 
    }).fire() ;
}

Your create a component MyDialogComponent, who handles this event, and is displayed when receiving it after the onClickMethod behind a button,

doInit(component,event,helper){
    component.set('v.callBack',event.getParam('callBack');
    // here reuse question & answer list to build the dialog
    // .....
},

onDialogClick(component,event,helper){
    var callBack = component.get('v.callBack');
    callBack.call(dialogResult);
}
0

Developed this component, in github.

It creates a custom confirmation dialog, allows custom title, tagline and body, handles the Esc key press to close it and best of all: will call back to your confirmation function, so no need to duplicate code everywhere.

<c:modal_confirmation title="Modal Confirmation Box" 
                      tagline="This is a modal confirmation box" 
                      message="Are you sure you want to continue?" 
                      confirm="{!c.handleConfirm}"/>

Get to the code and tweak it for your needs, change the button labels, etc...

modal dialog example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.