弹出模式可点击的背景

时间:2017-08-25 13:31:22

标签: html css modal-dialog

the background is clickable, i can edit the input fields while the modal is out, how d i disable any click here?我希望我的模态禁用后台的所有点击,它当前允许我在有按钮或链接时单击背景。如何禁用它,因为我认为pointer:none应该禁用它?

任何帮助都将不胜感激。

这是我的CSS代码和HTML代码:



.ng-modal-overlay {
    /* A dark translucent div that covers the whole screen */
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity:1.0;
    pointer-events: none;
}

.ng-modal-dialog {
    /* A centered div above the overlay with a box shadow. */
    z-index: 10000;
    position: fixed;
    width: 50%; /* Default */
    /* Center the dialog */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 4px 4px 80px #000;
    pointer-events: auto;
}

.ng-modal-dialog-content {
    padding: 10px;
    text-align: left;
}

.ng-modal-dialog-footer {
    margin-top:40px;
    text-align:right;
}

.ng-modal-close {
    position: absolute;
    top: 3px;
    right: 5px;
    padding: 5px;
    cursor: pointer;
    font-size: 150%;
    color:red;
    display: inline-block;
    font-weight: bold;
    font-family: 'arial', 'sans-serif';
}

<modal-dialog show="TeamManagementModal" class="ng-modal-overlay" data-backdrop="false">

    <div class="modal-inner">
        <div class=".ng-modal-dialog-content">
            <p ng-bind-html="msg"></p>
            <p ng-bind-html="ErrorMsg"></p>
        </div>
        <div class="ng-modal-dialog-footer">

            <button style="width:160px;" class="btn solid-green-btn" ng-show="nowAdminOk" ng-click="Great()">Great</button>
        </div>
    </div>
</modal-dialog>
&#13;
&#13;
&#13;

0 个答案:

没有答案