Wie kann ich ein Bootstrap-Modal so stylen, dass es in Rails lesbar ist?

Question

Ich habe einen modal, die auf ein Kontrollkästchen angebracht ist:

.modal.fade{id:"vip-modal", tabindex:"-1", role:"dialog", "aria-labelledby" => "vip-modal", "aria-hidden" => "true"} 
    %div{id:"modal-dialog"} 
    %div{id:"modal-content"} 
     .modal-header 
     %h4{class:"modal-title", id:"vip-modal-label"} Notes 
     .modal-body 
     1. Welcome to the the Program! 
     .modal-footer 
     %button{type:"button", class:"btn btn-primary", "data-dismiss" => "modal"} Close 

ich es auslösen, wenn ein bestimmtes Kontrollkästchen aktiviert ist. Modal kommt gut an.

Außer nicht wirklich. Es ist ein graues Overlay, das den gesamten Bildschirm abdeckt. Der Text ist da, aber der Text auf dem zugrundeliegenden Formular, besonders die fett gedruckten Etiketten, kommen durch. Die Undurchsichtigkeit oder das Fehlen davon macht es unbrauchbar und unlesbar.

Mein Ziel ist es, das Fenster in der Mitte des Bildschirms erscheinen zu lassen, den Benutzer durch den Text scrollen zu lassen (ich füge mehr hinzu, nachdem es funktioniert, es ist wie ein EULA), und dann verschwindet es Der Benutzer klickt auf die Schaltfläche Akzeptieren (die ich noch nicht hinzugefügt habe).

Dieses standardmäßige Bootstrap-Modal ist in seiner aktuellen Form nicht verwendbar.

Answer 1

Sie verwenden IDs anstelle von Klassen für die modalen Divs. Schauen Sie sich die Dokumentation an: http://getbootstrap.com/javascript/#modals - Sie wollen die Klassen "modal-content" und "modal-dialog" verwenden