在后台编辑字段，同时保持 Angular UI 模式打开

Question

In this plunk 我有一个 Angular UI 模式，它处于打开状态，不允许 edit/change 在后台进行任何操作。我需要在保持模式 window 打开的同时编辑文本字段。这可能吗？

HTML

Enter 222 in this field without closing the modal:<input type="text" ng-model="someField">

<style>
      .modal-backdrop.in {
        opacity: 0;
      }
      .app-modal .modal-dialog {
          top: 80px;
          width: 180px;
       }
</style>

<script type="text/ng-template" id="myModalContent.html">

    <div class="modal-header">
        <p class="modal-title">The Title</p>
    </div>

        SOME CONTENT

</script>

Javascript

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {

    $scope.modalInstance = $uibModal.open({
        templateUrl: 'myModalContent.html',
        windowClass: 'app-modal',
        backdrop: 'static'
      }); 
});

Answer 1

是的，您可能必须将 z-index 设置为输入元素。看看这个 plunker：http://plnkr.co/edit/MdmsjJuUxZdDHBTQeNet?p=preview

input {
        z-index: 100000;
        position: relative;
      }

在后台编辑字段，同时保持 Angular UI 模式打开

Edit field in background while keeping an Angular UI Modal open

angularjs

angular-ui

angular-ui-bootstrap