how to hide the background when dialog is open

[Sridhar]

Hai Team,

            I am currently developing web application in Angular4 and syncfusion properties.I have used Ej Dialog popups in my application in that when i open the dialog the body background should be in black color and it cannot be editable.How can i implement in my application.Please guide me ASAP.

Herewith I am attaching the html and Typscript code.Please check it and get back to us soon.

HTML CODE:

  <div class="row mfg-top panel panel-default">

                <div class="panel-heading">Cause Details</div>

                <div class="panel-body">

                    <div class="row mrgn_btm">

                        <div class="col-lg-6 col-md-6 mfg-top">

                            <div class="row">

                                <div class="col-lg-2 col-md-2">

                                    <label class="label_size">Cause<span class="validation_symbol">*</span></label>

                                </div>

                                <div class="col-lg-6 col-md-6" style="text-align:center;margin-left:91px;" id="parent">

                                    <button type="button" id="btnCauseOpen" name="cause" class="btn btn-default btn-width" data-toggle="modal" data-target="#myModal" style="width:320px" (click)="onCauseClick($event)">Add Cause</button>

                                </div>

                            </div>

                        </div>

                    </div>

   <ej-dialog id="Causedialog" title="cause" [actionButtons]="causeactionButtons" [enableResize]="false" [showOnInit]='false' width="150%" [isResponsive]='true'

               containment='#parent' (close)="onCauseClose($event)" (open)="OpenCausedialog($event)">

        <form #cause="ngForm" ng-submit="addSafetyCause(cause)">

            <div class="panel-group">

                <div class="row mfg-top panel panel-default">

                    <div class="row mrgn_btm">

                        <div class="col-lg-12 col-md-12  mfg-top">

                            <div class="row">

                                <div class="col-lg-12 col-md-12">

                                    <div class="col-lg-3 col-md-3">

                                        <label class="label_size">Cause<span class="red">*</span></label>

                                    </div>

                                    <div class="col-lg-3 col-md-3">

                                        <input type="text" name="CauseID" [(ngModel)]='safetycauseevent.factorID' nameCauseID="ngModel" id="txtddpcause" width="200px" ej-dropdownlist [dataSource]="factorinfoValues" [fields]="factorinfofieldsvalues" watermarkText="Select a cause" (ngModelChange)="onCauseChange($event)" required autocomplete="off">

                                        <!--<input id="bookSelect" ej-dropdownlist [dataSource]="factorinfoValues" [fields]="factorinfofieldsvalues" (change)="onChange($event)" width="300px" height="50px" popupWidth="300px" popupHeight="100px" />-->

                                        <span *ngIf="nameCauseID?.touched && !nameCauseID.valid" class="validationmessage" style="color:red">

                                            Cause Type is Required!

                                        </span>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                    <ng-container *ngIf="ShowIncidentCause">

                        <div class="row mrgn_btm">

                            <div class="col-lg-12 col-md-12">

                                <div class="col-lg-3 col-md-3">

                                    <label class="label_size">Cause Description:</label>

                                </div>

                                <div class="col-lg-8 col-md-8">

                                    <div class='input-group date'>

                                        <label style="font-weight:normal">{{safetycauseevent.causeDescription}}</label>

                                    </div>

                                </div>

                            </div>

                        </div>

                        </ng-container>

                        <br />

                        <div class="row mrgn_btm">

                            <div class="col-lg-6 col-md-6 mfg-top div-marleft">

                                <div class="row">

                                    <div class="col-lg-6 col-md-6">

                                        <label class="label_size">Cause Type</label>

                                    </div>

                                    <div class="col-lg-2 col-md-2" style="margin-left:0px">

                                        <div class="radio radio-info radio-inline">

                                            <input type="radio" id="txtRoot" value="Root" name="Root" [(ngModel)]="safetycauseevent.CauseInformation" [checked]="safetycauseevent.CauseInformation">

                                            <label for="Ergonomic1"> Root Cause</label>

                                        </div>

                                    </div>

                                    <div class="col-lg-2 col-md-2">

                                        <div class="radio radio-info radio-inline" style="margin-left:70px;">

                                            <input type="radio" id="txtContributory" value="Contributory" name="Contributory Cause" [(ngModel)]="safetycauseevent.CauseInformation"

                                                   [checked]="safetycauseevent.CauseInformation">

                                            <label for="Ergonomic2"> Contributory Cause</label>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="row mrgn_btm">

                            <div class="col-lg-12 col-md-12  mfg-top">

                                <div class="row">

                                    <div class="col-lg-12 col-md-12" style="text-align:center">

                                        <button class="btn btn-danger  btn-space pull-right" style="margin-left:5px;width:100px;" (click)="btnCauseClick($event)">Cancel</button>

                                        <button class="btn btn-success btn-space pull-right" style="width: 100px;margin-left:10px;" [disabled]="cause.invalid" (click)="addcauseinformation(safetycauseevent)">Add</button>

                                    </div>

                                </div>

                            </div>

                        </div>

                </div>

            </div>

            </form>

    </ej-dialog>

[Christopher Issac Sunder K]

Hi Sridhar, 

Thank you for contacting Syncfusion support. 

To achieve the disabled background of the main form when dialog opens, you can display the dialog as modal using enableModal property. Here is the code, 

<ej-dialog id="lognForm" title="Modal dialog" [enableModal]="enablemodal" [enableResize]="resize" [isResponsive]="responsive"> 

    This is a simple model dialog 

</ej-dialog> 

 

[Script] 

export class AppComponent { 

    enablemodal: boolean; 

    resize: boolean; 

    responsive: boolean; 

    constructor() { 

        this.enablemodal = true; 

        this.resize = true; 

        this.responsive = true; 

    } 

} 

Please refer the below documentation for more details, 

https://help.syncfusion.com/angular/dialog/action-buttons#giving-modal-dialog 

Please let us know if you need further assistance. 

Thanks,
Christo

[Sridhar]

Hai Christopher,

              I am using Ng container to show and hide the modal dialog box.I tried your code but its not working for our current scenario.Please read the code carefully and give me an proper solution.

Herewith I attach the html and typescript code fully.Please check it and get back to us soon.

HTML Code:

<ng-container *ngIf="ShowEnvIncidentCreation">

    <ej-dialog id="Correctiveactiondialog" title="Corrective Action" [enableResize]="resize" [showOnInit]='false' width="150%" [isResponsive]='responsive'

               containment='#parent' (close)="onCorrectiveClose($event)" [enableModal]="enablemodal">

        <form #corrective="ngForm" ng-submit="addEnvCorrective(corrective)">

            <div class="panel-group">

                <div class="row mfg-top panel panel-default">

                    <div class="row mrgn_btm">

                        <div class="col-lg-12 col-md-12  mfg-top">

                            <div class="row">

                                <div class="col-lg-12 col-md-12">

                                    <div class="col-lg-3 col-md-3">

                                        <label class="label_size">Responsible Name<span class="red">*</span></label>

                                    </div>

                                    <div class="col-lg-5 col-md-5">

                                        <input class="form-control" id="txtResponsibleName" type="text" name="responsiblename" #nameResponsibleName="ngModel"

                                               ej-autocomplete [fields]="fields" width="200px" [(ngModel)]="safetycorrectiveevent.responsibleName" [dataSource]="userdetail" watermarkText="Enter Responsible Name"

                                               required autocomplete="off" />

                                        <span *ngIf="nameResponsibleName?.touched && !nameResponsibleName.valid" class="validationmessage" style="color:red">

                                            Responsible Name is Required!

                                        </span>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="row mrgn_btm">

                        <div class="col-lg-12 col-md-12">

                            <div class="col-lg-3 col-md-3">

                                <label class="label_size">Preliminary Corrective Action Date<span class="red">*</span></label>

                            </div>

                            <div class="col-lg-8 col-md-8">

                                <div class='input-group date'>

                                    <input type="text" [(ngModel)]="safetycorrectiveevent.correctiveActDate" name="correctiveActDate" id="correctiveActDate" #nameCorrectiveActDate="ngModel" width="200px" watermarkText="Enter datetime" ej-datetimepicker required autocomplete="off">

                                    <span *ngIf="nameCorrectiveActDate?.touched && !nameCorrectiveActDate.valid" class="validationmessage" style="color:red">

                                        Prelimenary Corrective Action Date is Required!

                                    </span>

                                </div>

                            </div>

                        </div>

                    </div>

                    <br />

                    <div class="row mrgn_btm">

                        <div class="col-lg-12 col-md-12">

                            <div class="col-lg-3 col-md-3">

                                <label class="label_size">Corrective Action Closure Date<span class="red">*</span></label>

                            </div>

                            <div class="col-lg-8 col-md-8">

                                <div class='input-group date'>

                                    <input type="text" [(ngModel)]="safetycorrectiveevent.confCorrectiveActCloseDate" name="confCorrectiveActCloseDate" #nameConfCorrectiveActCloseDate="ngModel" width="200px" id="datetimepick" watermarkText="Enter Corrective Action Date" ej-datetimepicker required autocomplete="off">

                                    <span *ngIf="nameConfCorrectiveActCloseDate?.touched && !nameConfCorrectiveActCloseDate.valid" class="validationmessage" style="color:red">

                                       Corrective Action Closure Date is Required !

                                    </span>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="row mrgn_btm">

                        <div class="col-lg-12 col-md-12">

                            <div class="col-lg-3 col-md-3">

                                <label class="label_size">Prelimenary Action Description<span class="red">*</span></label>

                            </div>

                            <div class="col-lg-9 col-md-9" style="margin-left:-5px">

                                <div class="radio radio-info radio-inline">

                                    <textarea class="form-control" name="correctiveActDesc" #nameCorrectiveActDesc="ngModel" [(ngModel)]="safetycorrectiveevent.correctiveActDesc" watermarkText="Enter Prelimenary Action Description" style="height:90px;width:300px;margin-left:-4%;" watermarkText="Enter Prelimenary Action Description" required autocomplete="off" ></textarea>

                                    <span *ngIf="nameCorrectiveActDesc?.touched && !nameCorrectiveActDesc.valid" class="validationmessage" style="color:red">

                                        Prelimenary Action Description is Required !

                                    </span>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="row mrgn_btm">

                        <div class="col-lg-12 col-md-12 mfg-top">

                            <div class="row">

                                <div class="col-lg-12 col-md-12" style="text-align:center">

                                    <button class="btn btn-danger  btn-space pull-right" style="margin-left:5px;width:100px;" (click)="btnClick($event)">Cancel</button>

                                    <button class="btn btn-success btn-space pull-right" style="width: 100px;margin-left:10px;" (click)="addeventcorrective(safetycorrectiveevent)" [disabled]="corrective.invalid">Add</button>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            </form>

    </ej-dialog>

[Christopher Issac Sunder K]

Hi Sridhar, 

Thanks for the update.  

We have analyzed with the provided code and found that you are using containment property. So, the modal dialog is shown only in the particular target but your requirement is to disable the entire body when popup displayed. Hence, we suggest you to remove the containment property so that the target will be automatically set to body. Also, please ensure the enableModel property is set to true. We have prepared a sample to achieve the requirement, 

https://plnkr.co/edit/Q5xzYepvQPEjokbDoZro?p=preview&preview 

Please let us know if the provided solution is not helping you. 

Thanks,
Christo 

[Sridhar]

Hai Team,

          We cannot remove the containment property because if we remove that property all popups fields are displaying in the other pages.So please give me proper solution as per my requirement and we need a solution ASAP.

Herewith I attach the screenshot after removing the containment property.

 

[Christopher Issac Sunder K]

Hi Sridhar, 

Thanks for the update. 

Generally, if we don’t set the containment property, our Dialog will render in the page body by default(i.e. in the center place). It seems, while seeing your shared screenshot, you are facing some other issues in Dialog rendering. 

So please share us the below details for more analysis, 

• Share the Screenshot of the console error if you faced any.
• That contentment property id #parent, are you using it for the whole page ?
• Are you trying to use the Dialog for Grid Editing or opening it separately? If so, we already have various modes of Editing support in our Grid.

                 https://help.syncfusion.com/angular/grid/editing#edit-modes 

Thanks, 

Christo

[Sridhar]

Hi Christo,

         I am using that containment property for whole page.We are using ej-dialog to open separately.We cannot remove the containment property.Please give me proper solution to hide the background when the dialog is open.

Attachment: Syncfusion_Dialog_90ec63ee.zip

[Prince Oliver]

Hi Sridhar, 

Thank you for your update. 

Based on the shared code, we suspect that the enableModal property is not properly specified in the dialog control.  Kindly refer to the following code, 

 

[App.component.html] 

<ej-dialog id="Causedialog" title="cause" [enableModal] ="true"> // enable enableModal property 

</ej-dialog> 

 

     

You can ensure that the enableModal property set properly in the application by checking for the dialog overlay element in the Elements panel of the chrome browser. Please refer to the following screenshot. 

 

 

 

We have attached the sample for your reference, please find the sample at the following link: https://plnkr.co/edit/cDFmViF55l569xdl?preview    

 

Modal dialog disables the interaction with other items on the page. The modal dialog acts like a child window that is displayed on the top of the main window and disables the main window interaction until it is closed.  Normally, dialog is appended to the body element.  So, dialog overlay is created on whole page as shown in the above shared sample. 

API link: https://help.syncfusion.com/api/js/ejdialog#members:enablemodal   

 

We can modify this using the containment property in the dialog. If the containment property is set, then dialog is appended based on that containment element and overlay is created within the containment element.   

API link: https://help.syncfusion.com/api/js/ejdialog#members:containment  

 

Please find the sample for the dialog using the containment property in the following link: https://next.plnkr.co/edit/zvOoD9s7QvFeVtFx  

 

Regards, 

Prince