html - 模态不垂直和水平渲染到屏幕中心

Question

我已经创建了一个 Angular 模态组件，需要将模态渲染到屏幕中心。它应该垂直和水平到中心。我有 95% 的宽度。高度也是95%。

我尝试了很多 css 选项，但到目前为止都没有成功。模态对话框倾向于呈现在屏幕底部。

这是我的代码

CSS

.modal-dialog {
    margin:5% auto;
    // position: relative;
    // top: 2%;
    // transform: translateY(-2%);

    position: absolute;
    top: 50%;
    left: 50;
    transform: translate(-50%, -50%) !important;
  }

  .modal-md {
    max-width: 60%;
  }

  .modal-lg {
    max-width: 70%;
  }

  .modal-xl {

    max-width: 95%;
}

.modal-content {
   border-radius: 6px 6px 6px 6px;
}

模态类:

import { Component, Input, OnChanges, OnInit, SimpleChange, SimpleChanges, DoCheck } from '@angular/core';
declare var $: any;
@Component({
    selector: 'shared-modal',
    templateUrl: './shared-modal.html'
})
export class SharedModal {
    _isopen = false;

    private _modalSize = 1; // 1:normal, 2: medium, 3: large
    public get modalSize() {
        return this._modalSize;
    }

    @Input()
    public set modalSize(value) {
        this._modalSize = value;
    }

    get open(): boolean {
        return this._isopen;
    }

    @Input()
    set open(val: boolean) {
        this._isopen = val;
    }
    getModalDialogClass() {
        if (this.modalSize == null || this.modalSize <= 1 || this.modalSize > 4) {
            return 'modal-dialog';
        } else if (this.modalSize <= 2) {
            return 'modal-dialog modal-md';
        } else if (this.modalSize <= 3) {
            return 'modal-dialog modal-lg';
        }  else if (this.modalSize <= 4) {
            return 'modal-dialog modal-xl';
        }
    }
}

在html中使用

<shared-modal [modalSize]="4" class="survey-edit" [open]="meetingnotesWindowOpened">
        <div style="width: 100%;" header>
                <h4 class="modal-title">Interaction Editor
                        <div style="text-align: right"><button aria-label="Dismiss" class="close" style="margin-top: -20px" type="button" (click)="dismissMeetingNotes()">X</button></div>
                    </h4>
        </div>
        <div body>
                <app-meetingnotes  #meetingNotes [ActivityTypeId]="ActivityTypeId" [ManagerStrategyId]="ManagerStrategyId"
                (closeActivity)="closeMeetingNotesActivity()"></app-meetingnotes>

        </div>
        <div footer>
        </div>
</shared-modal>

在对话框中呈现的 html

<style>
    th {
        border-bottom: 1px solid #d1d1d1;
        background: #f8f8f8;
        padding: 6px 8px 2px;
        white-space: normal;
        font-size: 11px
    }

    .panel-heading {
        color: white;
        background-color: #F59850;
        border-color: #ddd;
        overflow: hidden;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .panel-heading label {
        margin-bottom: 0px !important;
    }


    .scroller::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .scroller::-webkit-scrollbar-track {
        background: white;
    }

    .scroller::-webkit-scrollbar-thumb {
        background: #fce7d7;
        visibility: hidden;
    }

    .scroller:hover::-webkit-scrollbar-thumb {
        visibility: visible;
    }

    .scroller {

        overflow: auto;
        max-width: 100%;
        height: 900px;
    }


</style>

<div style="padding-top:8px; width: 100%;" *ngIf="this.Error && this.Error != ''" class="alert alert-danger"
    role="alert">
    <div [innerHTML]="Error"></div>
</div>

<div>
    <table style="width: 100%">
        <tr>
            <td style="width: 75%; text-align: left">
                <span class="strategy-name">{{ManagerStrategyName}}</span>&nbsp;&nbsp;&nbsp;<i
                    style="font-weight: bold;" class="fa fa-angle-right" *ngIf="ManagerStrategyName != null"></i>&nbsp;
                <span class="strategy-name">{{ActivityName}}</span>
            </td>
            <td style="text-align: right; padding-right: 20px">
                <button type="button" class="btn btn-main" [disabled]="Finalizing || Saving || LoadingStrategies"
                    (click)="saveChanges()" *ngIf="IsOwner"
                    style="width: 200px">{{Saving ? 'Saving...' : 'Save All'}}&nbsp;&nbsp;<img *ngIf="Saving"
                        src="../images/ajax-loader2.gif" style="width: 20px; height: 20px;" title="Wait" /></button>
            </td>
            <td *ngIf="!IsMeetingNote && !AllFinalized  && !IsOtherNote">
                <button type="button" class="btn btn-main" [disabled]="Finalizing || Saving || LoadingStrategies"
                    (click)="finalizeAll()" *ngIf="IsOwner"
                    style="width: 200px">{{Finalizing ? 'Finalizing...' : 'Finalize All'}}&nbsp;&nbsp;<img
                        *ngIf="Finalizing" src="../images/ajax-loader2.gif" style="width: 20px; height: 20px;"
                        title="Wait" /></button>
            </td>
        </tr>
    </table>
</div>
<br />
<div class="card-body scroller">
    <div class="panel panel-default activity ">
        <div class="panel-heading product-heading">
            Interaction Details
        </div>
        <div class="panel-body" style="width:100%" *ngIf="ViewModel != null">
            <div style="width:100%; float: left;">
                <table>
                    <tr>
                        <td style="padding-right:15px;"><strong class="modal-label">Interaction Date</strong><span
                                class="red"> *</span></td>
                        <td
                            style="padding-right:15px; padding-bottom: 10px; border-right: solid 1px lightgrey; padding-bottom: 10px">
                            <kendo-datepicker style="width: 200px" [format]="'dd MMM, yyyy'"
                                [(ngModel)]="ViewModel.Interaction.INTERACTION_DATE"
                                (valueChange)="interactionDateChanged($event)" [disabled]="!IsOwner"></kendo-datepicker>
                        </td>

                        <td
                            style="padding-left: 15px;  border-right: solid 1px lightgrey; border-bottom: solid 1px lightgrey; min-width: 300px;">
                            <strong class="modal-label">Available Strategies</strong>
                            <etp-spinner [loading]="LoadingStrategies"></etp-spinner>
                        </td>
                        <td style="padding-left: 15px; border-bottom: solid 1px lightgrey; min-width: 300px;"
                            *ngIf="InteractionLists.length > 0">
                            <strong class="modal-label">{{ExistingActivitiesTitle}}</strong>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-right:15px"><strong class="modal-label">Location</strong><span class="red">
                                *</span></td>
                        <td style="padding-right:15px; padding-bottom: 10px; border-right: solid 1px lightgrey;">
                            <kendo-dropdownlist style="width:350px" [(ngModel)]="SelectedLocation" [data]="locations"
                                [filterable]="false" textField="text" [disabled]="!IsOwner" valueField="value">
                            </kendo-dropdownlist>
                        </td>
                        <td rowspan="10"
                            style="vertical-align: top;padding-left: 15px; padding-right: 20px; padding-top: 6px; border-right: solid 1px lightgrey;">
                            <div *ngFor="let s of AllActivities; let i=index">
                                <label style="font-size: 13px;font-weight: normal;cursor: pointer">
                                    <input type="checkbox" [checked]="isStrategySelected(s)"
                                        value="{{s.MANAGERSTRATEGY_ID}}" id="{{s.MANAGERSTRATEGY_ID}}"
                                        (change)="strategyChanged(s)" style="width: 13px; height: 13px;"
                                        [disabled]="!IsOwner" />&nbsp;&nbsp;{{s.MANAGERSTRATEGY_NAME}}&nbsp;&nbsp;({{s.INVESTMENT_STATUS}})</label>
                            </div>
                        </td>
                        <td rowspan="10" *ngIf="InteractionLists.length > 0" style="padding: 6px;vertical-align: top">
                            <div *ngFor="let x of InteractionLists; let x=index"
                                style="border: solid 1px #fae7d6; border-radius: 5px; padding-top: 8px; padding-bottom: 8px; padding-right: 8px; padding-left: 5px">
                                <div *ngFor="let z of x; let z=index" (click)="openInteraction(x[0].INTERACTION_ID)"
                                    style="text-decoration: underline; cursor: pointer;font-size: 12px;">
                                    <span style="padding-top: 10px">{{z.MANAGERSTRATEGY_NAME}}
                                        <span>({{z.INVESTMENT_STATUS}}/{{z.IS_FINALISED ? 'Finalized' : 'Draft'}})</span><br /></span>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                    <tr>
                        <td style="padding-right:15px;"><strong class="modal-label">EnTrustPermal
                                Attendees</strong><span class="red"> *</span></td>
                        <td style="padding-right:15px; padding-bottom: 10px">
                            <kendo-multiselect #multiselect style="width:350px" [data]="entrustemployees"
                                textField="text" valueField="text" [valuePrimitive]="false" [disabled]="!IsOwner"
                                [filterable]="false" [(ngModel)]="SelectedEmployees" name="SelectedEmployees">
                            </kendo-multiselect>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="padding-right:15px;"><strong class="modal-label">Third Party Attendees</strong><span
                                class="red"> *</span></td>
                        <td style="padding-right:15px; padding-bottom: 10px"> <input type="text" class="form-control"
                                style="width:350px" placeholder="None"
                                [(ngModel)]="ViewModel.Interaction.OTHER_ATTENDEES" [disabled]="!IsOwner" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <etp-spinner [loading]="LoadingStrategies"></etp-spinner>

    <div>
        <div class="panel panel-default activity " *ngFor="let s of ViewModel.Interaction.ACTIVITies; let i=index">
            <div class="panel-heading product-heading">
                {{s.MANAGERSTRATEGY_NAME}}
            </div>
            <div class="panel-body">
                <div style="width: 100%; text-align: center; padding-top: 10px;">
                    <etp-spinner [loading]="LoadingActivities"></etp-spinner>
                </div>
                <div id="MeetingNotes">
                    <strong class="modal-label">Meeting Notes</strong>
                    <div style="padding-top:10px">
                        <div *ngIf="!s.IS_FINALISED">
                            <ckeditor *ngIf="EditorLoaded && IsOwner" [id]="'ckMeetingNote_' + s.MANAGERSTRATEGY_NAME"
                                style="font-size: 13px;" [(ngModel)]="s.MeetingNote.VALUE" debounce="500"
                                [config]="EditorConfig">
                            </ckeditor>
                        </div>
                        <div class="finalized-box" *ngIf="s.IS_FINALISED || !IsOwner" [innerHTML]="s.MeetingNote.VALUE">
                        </div>
                    </div>
                </div>

                <div style="padding-top: 20px">
                    <div style="text-align: left; padding-bottom:20px">
                        <button *ngIf="(!s.IS_FINALISED || Finalizing) && IsOwner" type="button" class="btn"
                            [disabled]="Finalizing || Saving || LoadingStrategies" (click)="saveChanges()"
                            style="width: 150px">{{Saving ? 'Saving...' : 'Save All'}}&nbsp;&nbsp;<i *ngIf="!Saving"
                                class="fas fa-save" aria-hidden="true"></i><img *ngIf="Saving"
                                src="../images/ajax-loader2.gif" style="width: 20px; height: 20px;"
                                title="Wait" /></button>&nbsp;&nbsp;&nbsp;
                        <button *ngIf="(!s.IS_FINALISED || Finalizing) && !IsMeetingNote && IsOwner && !IsOtherNote"
                            type="button" class="btn" [disabled]="Finalizing || Saving || LoadingStrategies"
                            (click)="finalizeOne(s.MANAGERSTRATEGY_ID)"
                            style="width: auto">{{Finalizing ? 'Finalizing...' : 'Finalize ' + s.MANAGERSTRATEGY_NAME}}&nbsp;&nbsp;<i
                                *ngIf="!Finalizing" class="fas fa-check-square" aria-hidden="true"></i><img
                                *ngIf="Finalizing" src="../images/ajax-loader2.gif" style="width: 20px; height: 20px;"
                                title="Wait" /></button>&nbsp;&nbsp;&nbsp;
                        <button *ngIf="(s.IS_FINALISED && !Finalizing) && IsOwner" type="button" class="btn"
                            [disabled]="Finalizing || Saving || LoadingStrategies" (click)="unlinalizeOne(s.ID)"
                            style="width: auto">{{Unfinalizing ? 'Unfinalizing...' : 'Unfinalize ' + s.MANAGERSTRATEGY_NAME }}&nbsp;&nbsp;<i
                                *ngIf="!Unfinalizing" class="fas fa-times" aria-hidden="true"></i><img
                                *ngIf="Unfinalizing" src="../images/ajax-loader2.gif" style="width: 20px; height: 20px;"
                                title="Wait" /></button>
                    </div>
                    <div *ngIf="this.Error && this.Error != ''" class="alert alert-danger" role="alert">
                        <div [innerHTML]="Error"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <activity-attachment #attachments [ManagerUrl]="ManagerUrl" [SelectedInteractionId]="SelectedInteractionId"
        [Multiple]="true" [Format]="'.pdf,.docx,.doc,.xls,.xlsx,.txt,.pptx,.ppt'" [ViewModel]="ViewModel"
        [IsOwner]="IsOwner" (updateAttachments)="updateAttachments($event)" (saveAttachment)="saveChanges($event)">
    </activity-attachment>

</div>

尝试了以下选项

.modal-dialog {     
      // max-width: 40%;
      //margin:5% auto;
      //  position: relative;
      // top: 2%;
      // transform: translateY(-2%);

      // position: absolute;
      // top: 50%;
      // left: 50%;
      // transform: translate(-50%, -50%) !important;
      // margin: auto;
      // position: fixed; 
      // top: 5%;
      //height: 95vh;

      //  margin: 0;
      //  top: 50%;
      //  position: absolute;
      //  left: 50%;
      //  transform: translate(-50%,-50%);

      //   display: inline-block;
      //  text-align: left;
      // vertical-align: middle;

      // display: flex !important;
      // align-items: center;

      //display: none;
      // position: fixed;
      // z-index: 9999;
      // width: 100%;
      // height: 100%;
      // top: 0;
      // left: 0;

      // display: flex;
      // align-items: center; 
 }

Answer 1

我已经通过添加以下 css 解决了这个问题

   .modal-open {
        overflow-x: hidden;
        overflow-y: auto;
      }

      .modal-dialog {
        position: relative;
        width: auto;
        margin: 10px;
      }

.modal-md {
    margin:5% auto;
    max-width: 60%;
  }

  .modal-lg {
    margin:5% auto;
    max-width: 70%;

  }

.modal-sm {
  max-width: 30%;
  margin:5% auto;

}

  .modal-xl {
    margin-top: 30px !important;
  margin-right: auto !important;
  margin-bottom: 30px !important;
  margin-left: auto !important;
  position: relative !important;
    max-width: 90%;
}

在html页面的body标签上应用了modal-open