Dừng hộp ưa thích khi người dùng nhấn Esc

Question

Tôi đang sử dụng fancybox trên một trang, nhưng tôi đang sử dụng nó như một tính năng thiết kế hơn là một phương thức jQuery. Tôi đang cố gắng ngăn người dùng không thể đóng nó (vì nó sẽ "phá vỡ" thiết kế của trang). Tôi đã quản lý để ngăn chặn người dùng từ cách nhấp vào fancybox, nhưng tôi gặp khó khăn dừng nó đóng khi phím Esc được nhấn. Tôi đã thử 'closeOnEscape': false nhưng điều này dường như không hoạt động. Dưới đây là mã của tôi. Bất kỳ đề xuất nào về những gì tôi đang làm sai hoặc những gì tôi cần làm?

$(document).ready(function() { 
    $.fancybox({ 
     'width': '340px', 
     'height': '100%', 
     'autoScale': true, 
     'transitionIn': 'none', 
     'transitionOut': 'none', 
     'type': 'iframe', 
     'href': 'form.php', 
     'hideOnContentClick': false, 
     'closeBtn' : false, 
     'helpers' : { 
      'overlay' : { 
       'closeClick': false, 
      } 
     } 
    }); 
}); 

Answer 1

Kiểm tra keys tùy chọn từ fancyBox docs:

phím
Xác định các phím bàn phím để di chuyển bộ sưu tập, đóng cửa và slideshow
Object; Giá trị mặc định:

{ 
    next : { 
     13 : 'left', // enter 
     34 : 'up', // page down 
     39 : 'left', // right arrow 
     40 : 'up' // down arrow 
    }, 
    prev : { 
     8 : 'right', // backspace 
     33 : 'down', // page up 
     37 : 'right', // left arrow 
     38 : 'down' // up arrow 
    }, 
    close : [27], // escape key 
    play : [32], // space - start/stop slideshow 
    toggle : [70] // letter "f" - toggle fullscreen 
} 

Chỉ cần bản đồ giá trị close để null.

---

Nếu bạn đang sử dụng fancyBox2, thêm thuộc tính này để mã của bạn:

$.fancybox({ 
    // all your other options here 
    ..., 
    keys : { 
    close : null 
    } 
} 

Answer 2

@ moonwave99 có câu trả lời chính xác cho fancybox2. Nếu bạn đang sử dụng v1.3 + sau đó bạn phải sử dụng:

enableEscapeButton: false 

Ref: http://fancybox.net/api

Answer 3

Như những người khác đã đề cập trong các ý kiến, công trình hoàn hảo modal: true ...

$.fancybox({ 
    modal: true 
}); 

Từ the docs...

phương thức - Nếu được đặt thành true, sẽ tắt điều hướng và đóng.