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

时间:2017-03-08 06:19:42

标签: angularjs angular-ui-bootstrap angular-ui

In this plunk我有一个Angular UI模式,它是打开的,不允许在后台编辑/更改任何内容。我需要在保持模态窗口打开的同时编辑文本字段。这可能吗?

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'
      }); 
});

1 个答案:

答案 0 :(得分:1)

是的,您可以将z-index设置为input元素。看看这个plunker:http://plnkr.co/edit/MdmsjJuUxZdDHBTQeNet?p=preview

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