ฉันจะป้องกันไม่ให้ angular-ui modal ปิดได้อย่างไร


87

ฉันใช้ Angular UI $ modal ในโครงการของฉัน http://angular-ui.github.io/bootstrap/#/modal

ฉันไม่ต้องการให้ผู้ใช้ปิดโมดอลโดยกดที่ฉากหลัง ฉันต้องการให้โมดอลสามารถปิดได้โดยการกดปุ่มปิดที่ฉันสร้างขึ้นเท่านั้น

ฉันจะป้องกันไม่ให้โมดอลปิดได้อย่างไร

คำตอบ:


195

ในขณะที่คุณสร้างโมดอลคุณสามารถระบุลักษณะการทำงานได้:

$modal.open({
   // ... other options
   backdrop  : 'static',
   keyboard  : false
});

2
ใช่นี่คือคำตอบที่ถูกต้อง :) ขอบคุณสำหรับการแบ่งปัน!
skywalker

เย็น! ขอบคุณสำหรับการแบ่งปัน. +1
Khanh Tran

10
มีวิธีใดบ้างในการตั้งค่าเหล่านี้แบบไดนามิก - หากป๊อปอัปอยู่ระหว่างการดำเนินการที่ไม่ควรถูกขัดจังหวะ
RonLugge

35
backdrop : 'static'

จะใช้ได้กับเหตุการณ์ "คลิก" แต่คุณยังสามารถใช้ปุ่ม "Esc" เพื่อปิดป๊อปอัปได้

keyboard :false

เพื่อป้องกันไม่ให้ป๊อปอัปใกล้กับแป้น "Esc"

ขอบคุณ pkozlowski.opensource สำหรับคำตอบ

ฉันคิดว่าคำถามซ้ำกับ Angular UI Bootstrap Modal - วิธีป้องกันการโต้ตอบของผู้ใช้


23

คำถามเก่า แต่ถ้าคุณต้องการเพิ่มกล่องโต้ตอบการยืนยันเกี่ยวกับการดำเนินการปิดต่างๆให้เพิ่มสิ่งนี้ในตัวควบคุมอินสแตนซ์โมดอลของคุณ:

$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();
    }
});

ฉันมีปุ่มปิดที่ด้านบนขวาของฉันซึ่งทำให้เกิดการดำเนินการ "ยกเลิก" คลิกที่ฉากหลัง (หากเปิดใช้งาน) จะทริกเกอร์การดำเนินการยกเลิก คุณสามารถใช้ข้อความนั้นเพื่อใช้ข้อความที่แตกต่างกันสำหรับเหตุการณ์ปิดต่างๆ


มันตอบคำถามของฉันได้อย่างไร?
Rahul Prasad

ด้วยวิธีนี้คุณสามารถสกัดกั้นได้หากมีการสั่งให้โมดอลปิดด้วยเหตุผลของคำสั่ง ขึ้นอยู่กับว่าคุณเพิ่มตรรกะที่กำหนดเองหากต้องการหรืออาจแจ้งให้ผู้ใช้ยืนยันก่อนปิดโมดอลจริง
Tiago

ตามคำถามที่ระบุบอกฉันตรรกะซึ่งจะป้องกันไม่ให้โมดอลปิด?
Rahul Prasad

หากนั่นคือทั้งหมดที่คุณต้องการให้ใช้event.preventDefault();ภายในcase "backdrop click"และกลับมาเพื่อสิ้นสุดการดำเนินการ
Tiago

5
+1. นี่เป็นวิธีที่ดีกว่ามากในการป้องกันไม่ให้โมดอลปิดโดยไม่ จำกัด คุณสมบัติ (ทริกเกอร์ฉากหลังและคีย์บอร์ด) หมายเหตุ: มีการถ่ายทอดเหตุการณ์ดังนั้นต้องรับฟังในขอบเขต uibModalInstance หรือขอบเขตดาวน์สตรีม ณ 0.13: a5a82d9
Sergej Popov

13

นี่คือสิ่งที่กล่าวถึงในเอกสาร

ฉากหลัง - ควบคุมการมีอยู่ของฉากหลัง ค่าที่อนุญาต: จริง (ค่าเริ่มต้น) เท็จ (ไม่มีฉากหลัง) 'คงที่' - มีฉากหลังอยู่ แต่หน้าต่างโมดอลจะไม่ปิดเมื่อคลิกนอกหน้าต่างโมดอล

static อาจใช้งานได้


มีตัวเลือกใดบ้างที่ไม่ควรแสดงฉากหลังและหน้าต่างโมดอลควรปิดเมื่อคลิกนอกหน้าต่างโมดอล

8

กำหนดค่าทั่วโลก

มัณฑนากรซึ่งเป็นหนึ่งในคุณสมบัติที่ดีที่สุดในเชิงมุม ให้ความสามารถในการ "แก้ไข"โมดูลของบุคคลที่สาม

สมมติว่าคุณต้องการพฤติกรรมนี้ใน$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


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.