为什么我不能关闭模态闪电组件？

Question

我制作了一个闪电组件，该组件应该用作模式/弹出窗口，并在“取消”按钮上关闭。我尝试了多种解决方案（如控制器功能所示），但是这些解决方案都不能摆脱模态，这可能是因为我忽略了自己的组件或CSS代码中的某些内容。这些控制器操作确实会在后台刷新页面。 “ navigateToObjectHome”操作是我在沙箱中的全部操作，效果很好，但是我的生产组织具有控制台视图，并且仅刷新页面而不关闭模式/组件。请告诉我我在做错什么。

组件：

<aura:attribute name="isModalOpen" type="boolean" default="true"/>

<!-- CREATE NEW LEAD -->
<aura:if isTrue="{!v.isModalOpen}">
    <div aura:id="editDialog" role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <h2 class="slds-text-heading--medium">New Lead</h2>
            </div>
            <div class="slds-modal__content slds-p-around--medium slds-grid slds-wrap ">

                <!-- CREATE NEW LEAD FORM -->
                <form class="slds-form--stacked">
                    <lightning:recordEditForm aura:id="recordViewForm" 
                                              objectApiName="Lead"
                                              onsubmit="{!c.save}"
                                              onsuccess="{!c.handleSuccess}"
                                              onerror="{!c.handleError}"
                                              >
                        <lightning:messages />

                        <h1>Lead Information</h1>
                        <div class="row">
                            <div class="column">
                                <lightning:inputField fieldName="Status" aura:id="Status" required="true"/> 
                            </div>
                            <div class="column">
                                <lightning:outputField fieldName="OwnerId" required="true"/> 
                            </div>
                        </div>                
                        <div class="row">
                            <div class="column">
                                <lightning:inputField fieldName="Name" aura:id="Name"/> 
                            </div>
                            <div class="column">
                                <lightning:inputField fieldName="Type_Lead__c" /> 
                                <lightning:inputField fieldName="Titel__c"/> 
                            </div>
                        </div>
                        <div class="row">
                            <div class="column">
                                <lightning:inputField fieldName="BTW_nummer_text__c" aura:id="BTW_nummer_text__c" value="{!v.BTW_nummer_text__c}"
                                                      required="true"/> 
                            </div>
                            <div class="column">
                                <lightning:button label="refresh VAT number" 
                                                  class="slds-m-top--medium"
                                                  onclick="{!c.refreshVAT}"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column">
                                <lightning:inputField fieldName="Bedrijfsvorm__c" aura:id="Bedrijfsvorm__c" value=""/> 
                            </div>
                            <div class="column">
                                <lightning:inputField fieldName="Company" aura:id="Company" value="{!v.Company}"/> 
                            </div>
                        </div>
                        <div class="row">
                            <div class="column">
                                <lightning:inputField fieldName="Taal__c" aura:id="Taal__c" required="true"/> 
                            </div>
                        </div>

                        <h1>Address Information</h1>

                        <div class="row">
                            <div class="column">
                                <lightning:inputField fieldName="Street" aura:id="Street" value="{!v.Street}"/> 
                            </div>
                            <div class="column">
                                <lightning:inputField fieldName="City" aura:id="City" value="{!v.City}"/> 
                            </div>
                        </div>
                        <div class="row">
                            <div class="column">
                                <lightning:inputField fieldName="PostalCode" aura:id="PostalCode" value="{!v.PostalCode}"/>
                            </div>
                            <div class="column">
                                <lightning:inputField fieldName="Country" aura:id="Country" value="{!v.Country}"/>
                            </div>
                        </div>                            
                        <!-- BUTTONS -->
                        <div class="row">
                            <div class="column">

                            </div>
                            <div class="column">
                                <lightning:button variant="neutral" label="Cancel" onclick="{!c.cancelButton}" />
                                <lightning:button label="Create lead" class="slds-m-top-medium" 
                                                  variant="brand" type="submit" name="save" />
                            </div>
                        </div> 

                        <!-- / CREATE NEW LEAD -->
                    </lightning:recordEditForm>
                </form>
            </div>
            <!--<div class="slds-modal__footer">                
            <lightning:button variant="neutral" label="Cancel" onclick="{!c.cancelButton}" />
            <lightning:button variant="brand" label="Submit" onclick="{!c.saveButton}" />
        </div>-->
        </div>
    </div>

    <div aura:id="overlay" class="slds-backdrop slds-backdrop--open"></div>
</aura:if>

控制器：

cancelButton : function(component, helper) {

        component.set("v.isModalOpen", false);
        $A.get("e.force:refreshView").fire();
        $A.get("e.force:closeQuickAction").fire();
        var homeEvt = $A.get("e.force:navigateToObjectHome");

        homeEvt.setParams({
            "scope": "Lead"
        });
        homeEvt.fire();

    }

样式表：

    .THIS .title {
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    }

    .THIS.row {
    padding-left: 10px;
    }

    .THIS .result {
    color: green;
    }

    .THIS p {
    padding-top: 5px;
    padding-bottom: 10px;
    }

    .THIS h1 {
    font-family: 'Salesforce Sans',Arial,sans-serif;
    font-size: .875rem;
    line-height: 1.5;
    background: rgb(243, 242, 242);
    padding: 1%;
    margin: 1%;
    border-radius: .25rem;
    color: rgb(8, 7, 7);
    }

    .THIS lightning:inputField {
    margin: 1%;
    }

    .THIS lightning:input {
    margin: 1%;
    }
   /* Create two equal columns that floats next to each other */
  .THIS .column {
  float: left;
  width: 50%;
  padding: 10px;
  }

  /* Clear floats after the columns */
  .THIS .row:after {
  content: "";
  display: table;
  clear: both;
  }

  .THIS .hidden {
    visibility:hidden;
  }

预期结果：关闭模态组件并导航到对象起始位置（主）

实际结果：仅在后台刷新页面，但模式保持打开状态。