No processo de desenvolvimento do programa da GUI, geralmente existem conceitos de caixas de diálogo modais e caixas de diálogo não modais.
Caixa de diálogo modal: durante a atividade da interface filho, a janela dos pais não pode responder à mensagem. Entrada exclusiva do usuário
Caixa de diálogo não modal: nenhum efeito entre o Windows
Principais diferenças: a caixa de diálogo não modal compartilha o loop da mensagem com o aplicativo e não ocupa exclusivamente os usuários.
A caixa de diálogo modal ocupa exclusivamente a entrada do usuário e outras interfaces não podem responder
Conteúdo deste artigo
Diálogo angular de padrão de implementação JS. Baseado em AngularJS v1.5.3 e Bootstrap v3.3.6.
Estrutura do projeto
Figura 1 Estrutura do projeto
Resultados de execução
Figura 1 Resultados da operação: Modo grande
index.html
<! Doctype html> <!-[se LT ie 7]> <html> <! [Endif]-> <!-[se ie 7]> <html> <! [Endif]-> <!-[se ie 8]> <html> <! [Endif]-> <!-[se gt ie ie ie ie 8]> <!-> <html> <!-<!-<! [Endif]-> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = borda, chrome = 1" <meta name = "viewport" = "wide" Rel = "Stylesheet" href = "../ src/vendor/bootstrap/dist/css/bootstrap.css"> </ad Head> <corpo ng-app = "myApp"> <!-modal Modal-> <script type = "text/ng-template" id = "<modelcontent.htmmmmMM". </div> <div> <ul> <li ng-repeat = "Item em itens"> <a ng-click = "selected.item = item"> {{item}} </a> </li> <div> Selecionado: <b> {{Selected.item}}} ng-click = "OK ()"> Confirmar </botão> <button ng click = "cancel ()"> exit </butut> </script> <div> diálogo modal angularjs </div> <ction> <seção ng-controller = "modaldemo" style = "margin: 40px; ng-click = "aberto ('lg')"> modal massivo </botão> <button ng-click = "Open ()"> modal </button> <button ng-click = "aberto ('sm')"> small modal </button> <hr> <div ng-show = "Selected> seleção: src = "../ src/vendor/angular/angular.js"> </script> <script src = "http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"> </script> < src = "../ src/js/mymodal.js"> </script> </body> </html>mymodal.js
/** * */angular.module ('myApp', ['ui.bootstrap']) // Demo Controller.Controller ('modaldemo', função ($ scope, $ modal, $ log) {// list $ scope.items = ['angularjs', 'backbone' ', canjs',; function (tamanho) {var modalInstance = $ modal.open ({templateurl: 'mymodelcontent.html', controlador: 'modalInstanceCtrl', // Especifique o controlador para o tamanho modal: tamanho, resolução: {itens: function) {retorna $ scope.items; modalInstance.Result.Then (function (selectedItem) {$ scope.Selected = selectedItem;}, function () {$ log.info ('modal descartado em:' + new Date ())}); $ scope.items = itens;O conteúdo acima é a caixa de diálogo Modal AngularJS introduzida pelo editor. Espero que seja útil para todos!