Twitter Bootstrap phương thức chặn trường nhập văn bản

Question

Tôi đang cố gắng sử dụng một phương thức làm cửa sổ trợ giúp bật lên. Tôi đặt phông nền thành 'không có gì'. Khi các trường nhập phương thức được mở (không có phông nền) trong trang 'gốc' không thể được tập trung.

Loại đầu vào khác (hộp kiểm và nút chẳng hạn) hoạt động tốt ...

Có ý tưởng nào không?

Mã của tôi:

<div class="container"> 
<!-- Button to trigger modal --> 
    <form> 
     <label>Input</label> 
     <input type="text" placeholder="Type something…"> 
     <label class="checkbox"> 
     <input type="checkbox">Checkbox 
     </label> 
     <button type="submit" class="btn">Submit</button> 
    </form> 

    <!-- Button to trigger modal --> 
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Open Help...</a> 

    <!-- Modal --> 
    <div id="myModal" class="modal hide" data-backdrop="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 
    </div> 
</div> 

Simple Javascript để làm popup kéo:

$('#myModal').draggable(); 

Tất cả điều này trên JSFiddle ...

http://jsfiddle.net/Jxdd8/3/

Answer 1

Nghe có vẻ như một phương thức không phải là giải pháp phù hợp cho vấn đề của bạn ở đây.

Một hộp thoại theo định nghĩa theo định nghĩa sẽ không cho phép người dùng tương tác với bất kỳ thứ gì bên dưới nó.

Trong thiết kế giao diện người dùng, một cửa sổ modal là một cửa sổ con rằng yêu cầu người dùng tương tác với nó trước khi họ có thể trở lại hoạt động ứng dụng mẹ, do đó ngăn ngừa các quy trình làm việc trên cửa sổ chính ứng dụng.

- http://en.wikipedia.org/wiki/Modal_window

Nói như vậy, có một cách để có được xung quanh nó. Bootstrap sets up an event listener để lấy nét từ mọi thứ khác và đó là điều khiến bạn không thể chỉnh sửa nội dung nhập văn bản. Các nút khác hoạt động vì chúng không yêu cầu tiêu điểm, chỉ có sự kiện nhấp chuột.

Bạn có thể nghe sự kiện 'được hiển thị' mà trình khởi động phương thức khởi động và vô hiệu hóa trình nghe tập trung được đặt.

$('#myModal').on('shown', function() { 
    $(document).off('focusin.modal'); 
}); 

Và chỉ để cho vui: http://jsfiddle.net/Jxdd8/4/

Answer 2

như Eric Freese nói: "Một hộp thoại modal theo định nghĩa không nên cho phép người dùng tương tác với bất cứ điều gì dưới nó." tôi đoán những gì bạn đang tìm kiếm có thể được tìm thấy trong Popover, trong đó có các tùy chọn để cho phép nội dung html http://twitter.github.com/bootstrap/javascript.html#popovers

Answer 3

* QUYẾT

Trong bất cứ sự kiện vẫn còn bị mắc kẹt về vấn đề này, các giải pháp thực hiện như sau:

Sau khi lớp div <div class="modal fade" chèn: style="display:none;" Điều này sẽ dừng phương thức chặn các trường và nó sẽ giải quyết vấn đề.

Answer 4

xin nhớ rằng Eric Freese Câu trả lời là không còn giá trị nếu bạn đang sử dụng Twitter Bootstrap 3 - tên sự kiện đã thay đổi, vì vậy sử dụng đoạn mã sau thay vì:

$('#myModal').on('shown.bs.modal', function() { 
    $(document).off('focusin.modal'); 
}); 

Answer 5

Tiếp theo cách có thể khắc phục vấn đề này trong Bootstrap v2.3.2, Kendo UI Grid phiên bản 2013.3.1119.340 trong IE11.

điểm sẽ xóa lớp "trong" khỏi lớp của phương thức. Không cần phải sử dụng "style = 'display: none;'" vì nó sẽ gây ra Kendo Grid UI một cách kỳ lạ.

mã html trước khi cố định:

<div class="modal hide fade in" id="YourWindow" role="dialog"> 

mã html sau khi cố định:

<div class="modal hide fade" id="YourWindow" role="dialog"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>    
     </div> 
     <div class="modal-body" > 
      <div id="YourWindowBody"> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" data-dismiss="modal">Close</button>  
     </div> 
    </div> 

Đồng thời, thêm dòng sau đây của javascript:

$("#YourWindow").on('shown', function() { 
     $(document).off('focusin.modal'); 
    }); 

Answer 6

Sử dụng Bootstrap phiên bản 3.3.2 và không có giải pháp nào ở trên hoạt động.

Thêm CSS sau đây đã làm các trick

.modal-backdrop { 
    position: static; 
} 

Answer 7

sử dụng mã này cuối tất cả các mã javascript:

$(document).on('focusin', function(e) { 
    if ($(event.target).closest(".mce-window").length) { 
     e.stopImmediatePropagation(); 
    } 
}); 

jsfiddle

Answer 8

Hãy loại bỏ:

tabindex="-1" 

từ

<div id="myModal" class="modal hide" data-backdrop="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

Sử dụng cái này thay vì:

<div id="myModal" class="modal hide" data-backdrop="" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

Answer 9

Đối với tôi, vấn đề là tôi đã sử dụng jquery 3.2.1, vì vậy tôi thay đổi nó để 2.1.3 mà đã sử dụng trên ứng dụng trước, chúng tôi đã phát triển và mọi thứ hoạt động tốt. Có thể là một cái gì đó với các phiên bản tương thích với jquery và bootstrap.

Hy vọng điều này sẽ giúp