Twitter Bootstrap - tại sao phương thức của tôi bị mờ đi làm nền?

Question

Vì vậy, tôi đang sử dụng Twitter Bootstrap và tôi có một phương thức trượt xuống khi người dùng nhấp vào nút "Đăng ký".

Vấn đề duy nhất là trang nền không chỉ mờ đi, mà là một hiệu ứng đẹp, nhưng phương thức cũng bị mờ đi. Làm thế nào tôi có thể nhận được nó để các phương thức là độ sáng bình thường trong khi nền là nhạt dần?

Tôi tạo ra một JSFiddle để chứng minh vấn đề của tôi ở đây: http://jsfiddle.net/jononomo/7z8RZ/7/

Đoạn mã sau tạo một phương thức mờ:

<div class="navbar navbar-fixed-top"> 
    <a href="#registration_modal" data-toggle="modal"> 
     Register 
    </a> 
    <div id="registration_modal" class="modal hide fade"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">×</button> 
       <h3 id="myModalLabel">Register An Account</h3> 
     </div> 

     <div class="modal-body"> 
      Registration form goes here. 
     </div> 

     <div class="modal-footer"> 
      <button class="btn btn-secondary" data-dismiss="modal">Cancel</button> 
      <button class="btn btn-primary">Register</button> 
     </div> 

    </div> 
</div> 

Note: nếu tôi loại bỏ các div bên ngoài, sau đó tất cả mọi thứ hoạt động tốt. Vì vậy, vấn đề là các mã cho phương thức nằm trong các dòng sau:

<div class="navbar navbar-fixed-top"> 
</div> 

Dĩ nhiên tôi không muốn loại bỏ div rằng, kể từ khi tôi muốn nút liên kết mà ra mắt phương thức được trong navbar được cố định ở phía trên cùng của màn hình.

Chỉnh sửa: Tôi đã thu hẹp nó xuống thực tế là div bên ngoài là của lớp navbar-fixed-top. Khi tôi xóa thẻ đó, mọi thứ hoạt động như mong đợi - bạn có thể thấy nó hoạt động chính xác tại đây: http://jsfiddle.net/jononomo/7z8RZ/8/ Tất nhiên, tôi muốn thanh điều hướng được cố định ở trên cùng, vì vậy điều này không giải quyết được sự cố của tôi.

Answer 1

Kiểm tra this issue trên kho lưu trữ gst Bootstrap.

Sau đó thử đặt phương thức trước thanh điều hướng, như this fiddle.

<div id="registration_modal" class="modal hide fade"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
     <h3>Register An Account</h3> 
    </div> 

    <div class="modal-body"> 
     Registration form goes here. 
    </div> 

    <div class="modal-footer"> 
     <button class="btn btn-secondary" data-dismiss="modal">Cancel</button> 
     <button class="btn btn-primary">Register</button> 
    </div> 

</div> 
<div class="navbar navbar-fixed-top"> 
    <a href="#registration_modal" data-toggle="modal"> 
     Register 
    </a>  
</div> 

Answer 2

Đáng tiếc là câu trả lời ở đây không giúp tôi .. nhưng may mắn thay cuộc thảo luận này có cùng một vấn đề và họ có một câu trả lời hữu ích mà làm việc cho tôi. Về cơ bản, bạn phải chắc chắn rằng các phương thức không được thừa hưởng bất kỳ yếu tố định vị lạ từ divs mẹ:

Bootstrap modal appearing under background

Answer 3

Cách mà tôi giải quyết nó bằng cách gói tất cả mọi thứ trong phương thức bên trong một thẻ <div class="modal-content">. Nó trông giống như thế này:

<div class="modal fade" id="TestModal"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      Modal header here 
     </div> 
     <div class="modal-body"> 
      <p>Modal content here</p> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
</div> 

Nếu không có modal-content div, phương thức kết thúc bằng màu xám làm nền.