ในกระบวนการพัฒนาโปรแกรม GUI มักจะมีแนวคิดของกล่องโต้ตอบแบบโมดอลและกล่องโต้ตอบที่ไม่ใช่โมดอล
กล่องโต้ตอบ Modal: ในระหว่างกิจกรรมอินเทอร์เฟซเด็กหน้าต่างหลักไม่สามารถตอบสนองต่อข้อความได้ อินพุตผู้ใช้พิเศษ
กล่องโต้ตอบที่ไม่ใช่โมดอล: ไม่มีผลระหว่าง Windows
ความแตกต่างที่สำคัญ: กล่องโต้ตอบที่ไม่ใช่โมดอลแชร์ลูปข้อความกับแอพและจะไม่ครอบครองผู้ใช้เท่านั้น
กล่องโต้ตอบแบบโมดอลนั้นมีการป้อนข้อมูลผู้ใช้โดยเฉพาะและอินเทอร์เฟซอื่น ๆ ไม่สามารถตอบสนองได้
เนื้อหาของบทความนี้
กล่องโต้ตอบรูปแบบการใช้งานเชิงมุม JS ขึ้นอยู่กับ AngularJS v1.5.3 และ bootstrap v3.3.6
โครงสร้างโครงการ
รูปที่ 1 โครงสร้างโครงการ
การรันผลลัพธ์
รูปที่ 1 ผลการดำเนินงาน: โหมดขนาดใหญ่
index.html
<! doctype html> <!-[ถ้า lt ie 7]> <html> <! [endif]-> <!-[ถ้าเช่น 7]> <html> <! [endif]-> <!-[ถ้าเช่น 8]> <html> <! 8]> <!-> <html> <!-<!-<! [endif]-> <head> <meta charset = "utf-8"> <meta http-equiv = "content" title> <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< rel = "stylesheet" href = "../ src/ผู้ขาย/bootstrap/dist/css/bootstrap.css"> </head> <body ng-app = "myapp"> <! <div> <ul> <li ng-repeat = "รายการในรายการ"> <a ng-click = "selected.item = item"> {{item}} </a> </li> <div> ที่เลือกในปัจจุบัน: <b> {{selected.item}} </b> ng-click = "cancel ()"> ออก </button> </script> <div> AngularJs Modal Dialog </div> <section> <ส่วน ng-controller = "modaldemo" style = "margin: 40px auto; float: none; ng-click = "Open ()"> Modal </putton> <button ng-click = "Open ('Sm')"> modal ขนาดเล็ก </button> <hr> <div ng-show = "เลือก"> การเลือกปัจจุบัน: {{selected}} </div> </section> </section> <! src = "../ src/ผู้ขาย/angular/angular.js"> </script> <script src = "http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js" src = "../ src/js/mymodal.js"> </script> </body> </html>mymodal.js
/** * */angular.module ('myapp', ['ui.bootstrap']) // คอนโทรลเลอร์สาธิต. controller ('modaldemo', ฟังก์ชั่น ($ scope, $ modal, $ log) {// list $ scope.items = ['Angularjs', 'backbone', 'canjs' ฟังก์ชั่น (ขนาด) {var modalinstance = $ modal.open ({templateurl: 'mymodelcontent.html', คอนโทรลเลอร์: 'modalinstancectrl', // ระบุคอนโทรลเลอร์สำหรับขนาดโมดอล: ขนาดการแก้ไข: {รายการ: ฟังก์ชั่น Modalinstance.result.Then (ฟังก์ชั่น (SelectedItem) {$ scope.Selected = selectedItem;}, function () {$ log.info ('Modal ถูกไล่ออกที่:' + วันที่ใหม่ ())}}}) // modal controller. $ scope.items = รายการ;เนื้อหาข้างต้นเป็นกล่องโต้ตอบ MONDAL MODAL ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!