ฉันใช้ Angular UI $ modal ในโครงการของฉัน http://angular-ui.github.io/bootstrap/#/modal
ฉันไม่ต้องการให้ผู้ใช้ปิดโมดอลโดยกดที่ฉากหลัง ฉันต้องการให้โมดอลสามารถปิดได้โดยการกดปุ่มปิดที่ฉันสร้างขึ้นเท่านั้น
ฉันจะป้องกันไม่ให้โมดอลปิดได้อย่างไร
ฉันใช้ Angular UI $ modal ในโครงการของฉัน http://angular-ui.github.io/bootstrap/#/modal
ฉันไม่ต้องการให้ผู้ใช้ปิดโมดอลโดยกดที่ฉากหลัง ฉันต้องการให้โมดอลสามารถปิดได้โดยการกดปุ่มปิดที่ฉันสร้างขึ้นเท่านั้น
ฉันจะป้องกันไม่ให้โมดอลปิดได้อย่างไร
คำตอบ:
ในขณะที่คุณสร้างโมดอลคุณสามารถระบุลักษณะการทำงานได้:
$modal.open({
// ... other options
backdrop : 'static',
keyboard : false
});
backdrop : 'static'
จะใช้ได้กับเหตุการณ์ "คลิก" แต่คุณยังสามารถใช้ปุ่ม "Esc" เพื่อปิดป๊อปอัปได้
keyboard :false
เพื่อป้องกันไม่ให้ป๊อปอัปใกล้กับแป้น "Esc"
ขอบคุณ pkozlowski.opensource สำหรับคำตอบ
ฉันคิดว่าคำถามซ้ำกับ Angular UI Bootstrap Modal - วิธีป้องกันการโต้ตอบของผู้ใช้
คำถามเก่า แต่ถ้าคุณต้องการเพิ่มกล่องโต้ตอบการยืนยันเกี่ยวกับการดำเนินการปิดต่างๆให้เพิ่มสิ่งนี้ในตัวควบคุมอินสแตนซ์โมดอลของคุณ:
$scope.$on('modal.closing', function(event, reason, closed) {
console.log('modal.closing: ' + (closed ? 'close' : 'dismiss') + '(' + reason + ')');
var message = "You are about to leave the edit view. Uncaught reason. Are you sure?";
switch (reason){
// clicked outside
case "backdrop click":
message = "Any changes will be lost, are you sure?";
break;
// cancel button
case "cancel":
message = "Any changes will be lost, are you sure?";
break;
// escape key
case "escape key press":
message = "Any changes will be lost, are you sure?";
break;
}
if (!confirm(message)) {
event.preventDefault();
}
});
ฉันมีปุ่มปิดที่ด้านบนขวาของฉันซึ่งทำให้เกิดการดำเนินการ "ยกเลิก" คลิกที่ฉากหลัง (หากเปิดใช้งาน) จะทริกเกอร์การดำเนินการยกเลิก คุณสามารถใช้ข้อความนั้นเพื่อใช้ข้อความที่แตกต่างกันสำหรับเหตุการณ์ปิดต่างๆ
event.preventDefault();
ภายในcase "backdrop click"
และกลับมาเพื่อสิ้นสุดการดำเนินการ
นี่คือสิ่งที่กล่าวถึงในเอกสาร
ฉากหลัง - ควบคุมการมีอยู่ของฉากหลัง ค่าที่อนุญาต: จริง (ค่าเริ่มต้น) เท็จ (ไม่มีฉากหลัง) 'คงที่' - มีฉากหลังอยู่ แต่หน้าต่างโมดอลจะไม่ปิดเมื่อคลิกนอกหน้าต่างโมดอล
static
อาจใช้งานได้
มัณฑนากรซึ่งเป็นหนึ่งในคุณสมบัติที่ดีที่สุดในเชิงมุม ให้ความสามารถในการ "แก้ไข"โมดูลของบุคคลที่สาม
สมมติว่าคุณต้องการพฤติกรรมนี้ใน$modal
การอ้างอิงทั้งหมดของคุณและคุณไม่ต้องการเปลี่ยนสาย
คุณสามารถเขียนมัณฑนากร ที่เพิ่มตัวเลือก -{backdrop:'static', keyboard:false}
angular.module('ui.bootstrap').config(function ($provide) {
$provide.decorator('$modal', function ($delegate) {
var open = $delegate.open;
$delegate.open = function (options) {
options = angular.extend(options || {}, {
backdrop: 'static',
keyboard: false
});
return open(options);
};
return $delegate;
})
});
$modal
เปลี่ยนชื่อเป็น$uibModal
การสาธิตออนไลน์ - http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview
สำหรับ ngDialog เวอร์ชันใหม่ (0.5.6) ให้ใช้:
closeByEscape : false
closeByDocument : false