<template>

    <lightning-input type="toggle" 
    label="Tagging option" 
    onchange={changeToggle} 
    checked={IsActive} 
    name="input1">
</lightning-input>


<template if:true={openModal}>  
    <div class="slds-modal slds-fade-in-open slds-backdrop">  
      <div class="slds-modal__container">   
        <div class="slds-modal__content slds-p-around_medium">
            <lightning-icon icon-name="action:approval" alternative-text="Approved" title="Approved"></lightning-icon>
            <div class="slds-text-heading_large"> Would you like to apply field to your documents?</div>
            <h1>If these documents were setup fro auto-tagging, 
                we will be able to read them
                and automatically place the fields on your document
            </h1> 
        </div>
        <!---Footer Section-->  
        <div class="slds-modal__footer">  
          <lightning-button label="Cancel" variant="outline-brand" onclick={closeModal}>  
          </lightning-button>
          <lightning-button label="Apply" variant="brand" onclick={applyModal}>  
        </lightning-button> 
        </div>  
      </div>  
    </div>  
  </template> 


</template>

import { LightningElement , track} from 'lwc';

export default class ToggleWithModal extends LightningElement {

  @track openModal = false;
  @track IsActive = false;
    changeToggle(event){
       if(event.target.checked){
            this.IsActive = true;
            this.openModal = true;
        }else{
            this.openModal = false;
        }

        
    }

    closeModal(){
        if(this.IsActive){
            this.IsActive = false;
        }
       // alert('close-->>> '+this.IsActive);
      //this.openModal = false;

     
    }

    applyModal(){
        //alert('Apply-->>> '+this.IsActive);
        if(!this.IsActive){
            this.IsActive = true;
        }
        
       // this.openModal = false;
    }

}