How can I style a Bootstrap modal so that it is readable in Rails?

Question

I have a modal that is attached to a checkbox:

.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

I trigger it when a certain checkbox is checked. Modal comes up fine.

Except not really. It's a gray overlay that covers the entire screen. The text is there, but the text on the underlying form, especially the bold labels, come through. The opacity, or lack thereof, renders it unusable and unreadable.

My goal is to have the window to come up in the center of the screen, have the user scroll through the text (I'm adding more after it's working, it's like a EULA), and have it then disappear when the user clicks an Accept button (which I haven't added yet).

This default Bootstrap modal is unusable in it's current form.

Answer 1

You're using IDs rather than classes on the modal divs. Check out the docs: http://getbootstrap.com/javascript/#modals - you'll want to use the classes "modal-content" and "modal-dialog"