模态对话框在UI网格中不会淡出

Question

这是ui grid中的模型代码：

 var modal = {
                open: function() {
                    //Modals inner body
                    var html = '<div class="modal" id="modal" ng-style="modalStyle"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button class="close" aria-hidden="true" data-dismiss="modal" ng-click="close()" type="button">×</button><div class="headerStyle"><b>Configuration</b></div></div><div class="modal-body"><div id="nsxManagers" ui-grid-selection ui-grid="gridOptionsManager" class="grid"></div><div id="nsxController" ui-grid-selection ui-grid="gridOptionsController" class="grid"> <div class="grid-msg-overlay" ng-hide="gridOptionsController.data.length && !loading"><div class="msg"><span>Loading Data...</span></div></div><div class="grid-msg-overlay" ng-hide="!loadAttempted"><div class="msg"><span>No Data</span></div></div>  </div><br>  <span class="searchBox" ><input id="searchField" ng-model="filterValue" ng-change="filter()" placeholder="Search"/></span><br><div id="nsxEdge" ui-grid-selection ui-grid="gridOptions" class="grid"> <div class="grid-msg-overlay" ng-hide="gridOptions.data.length && !loadingEdge"><div class="msg"><span>Loading Data...</span></div></div><div class="grid-msg-overlay" ng-hide="!loadAttemptedEdge"><div class="msg"><span>No Data</span></div></div></div></div><br><div class="modal-footer"><button id="buttonClose" class="btn" ng-click="close()">Cancel</button><button id="buttonConfigure" class="btn btn-primary"  data-toggle= "modal" data-target="#myModal" ng-click="close()" disabled>Configure</button></div></div></div></div>';
                    elm = angular.element(html);
                    angular.element(document.body).prepend(elm);}
            };
            }