[SalesForce] lightning modal window not opening

I must be doing something wrong. All of my debug lines output properly but It isn't opening up the popup modal window

<aura:attribute name="ShowCannotDeleteModel" type="Boolean" default="false" />

in js controller : 

}else if (menuValue == component.get("v.DeleteLabel")){
            console.log("in delete");
            component.set("v.SelectedRecord", selectedRecordId);
            console.log("set record");
            var action = component.get("c.candelete");    
            console.log("action");
            action.setParams({
            contactid : selectedRecordId
            });
           action.setCallback(this, function(response) {
            var bcandelete = response.getReturnValue();
               if(bcandelete){
                   component.set("v.ShowDeleteModel", true);
                   console.log("can delete");
               }else {
            component.set("v.ShowCannotDeleteModel", true);
                   console.log("cannot delete");
               }   
        })
              console.log("before enqueue");
        $A.enqueueAction(action);
            console.log("after");

        }

back in component:

  <!-- Cannot Delete Modal -->      
    <aura:if isTrue="{!v.ShowCannotDeleteModel}">
        <div class="demo-only" style="height: 640px;">
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p>You do not own this contact</p>
                    </div>
                    <footer class="slds-modal__footer">
                        <button class="slds-button slds-button_neutral" onclick="{!c.CloseModel}">Ok</button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
    </aura:if>

Best Answer

I implemented similar type of modal popup myself using aura:if, this should work. It seems you are missing a semi colon at the end of the action.setCallback. 

action.setCallback(this, function(response) {
     var bcandelete = response.getReturnValue();
        if(bcandelete){
             component.set("v.ShowDeleteModel", true);
             console.log("can delete");
         } else {
             component.set("v.ShowCannotDeleteModel", true);
             console.log("cannot delete");
         }   
 });
Related Topic