في عملية تطوير برنامج واجهة المستخدم الرسومية ، غالبًا ما تكون هناك مفاهيم لصناديق الحوار الوسيطة وصناديق الحوار غير الوسائط.
مربع الحوار الوسيط: أثناء نشاط واجهة الطفل ، لا يمكن للنافذة الأصل الاستجابة للرسالة. إدخال المستخدم الحصري
مربع الحوار غير الوسائط: لا يوجد تأثير بين Windows
الاختلافات الرئيسية: يشارك مربع الحوار غير الوسيط حلقة الرسالة مع التطبيق ولن يشغل المستخدمين بشكل حصري.
يشغل مربع الحوار الوسيط حصريًا مدخلات المستخدم ، ولا يمكن للواجهات الأخرى الاستجابة
محتوى هذه المقالة
حوار نمط تنفيذ JS الزاوي. بناءً على AngularJS V1.5.3 و Bootstrap v3.3.6.
هيكل المشروع
الشكل 1 هيكل المشروع
نتائج التشغيل
الشكل 1 نتائج التشغيل: الوضع الكبير
index.html
<! doctype html> <!-[if lt ie 7]> <html> <! 8]> <!-> <html> <!-<!-<! rel = "stylesheet" href = "../ src/بائع/bootstrap/dist/css/bootstrap.css"> </head> <body ng-app = "myapp"> <!-modal template-> <script type = "text/ng-template" id = </viv> <viv> <ul> <li ng-repeat = "item in heads"> <a ng-click = "select.item = item"> {{ite}} </a> </li> <viv> تم تحديده حاليًا: <b> {{select.item}} ng-click = "cancel ()"> خروج </button> </script> <viv> angularjs مربع الحوار modal </div> <section> <القسم ng-controller = "modaldemo" style = "margin: 40px Auto ؛ ng-click = "open ()"> modal </utton> <button ng-click = "open ('sm')"> modal small </utton> <hr> <div ng-show = "selection" src = "../ src/البائع/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' ، function ($ scope ، $ modal ، $ log) {// list $ spect Function (size) {var modalinstance = $ modal.open ({templateurl: 'mymodelcontent.html' ، وحدة التحكم: 'modalinstancectrl' ، // حدد وحدة التحكم لحجم مشروط: الحجم ، حل: modalinstance.result.then (function (selectItem) {$ scope.selected = selectItem ؛ العناصر ؛المحتوى أعلاه هو مربع الحوار AngularJS Modal الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!