问题描述:

I'm a starting on node.js and jade, I got an app in google app engine working with twitter bootstrap.

Problem When I converted the same html to jade though, the modal isn't behaving as it should, rather the background comes over it. I removed fade class but to no avail. Here's the code in jade

 #newWordModal.modal.hide

.modal-header

button.close(type='button', data-dismiss='modal') x

h3 Add A Word

.modal-body

#create-word

input#new-word-name(type='text', placeholder='Type in a word name')

input#new-word-def(type='text', placeholder='Define it....')

.modal-footer

a.btn(href='#', data-dismiss='modal') Close

a#add-word.btn.btn-primary(href='#', data-dismiss='modal') Add Word!

The same in html is this

<div class="modal hide fade" id="newWordModal">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">×</button>

<h3>Add A Word</h3>

</div>

<div class="modal-body">

<div id="create-word">

<input type="text" id="new-word-name" placeholder="Type in a word name" />

<input type="text" id="new-word-def" placeholder="Define it...." />

</div>

</div>

<div class="modal-footer">

<a href="#" class="btn" data-dismiss="modal">Close</a>

<a href="#" class="btn btn-primary" data-dismiss="modal" id="add-word">Add Word!</a>

</div>

</div>

Have I missed something here?

网友答案:

i think you are missing the 'modal.dialog' and 'modal-content' class as the content wrapper, as described here

your code then should look like this

#playlistloadmodal.modal.fade
        .modal-dialog
            .modal-content
                .modal-header
                    button.close(type='button', data-dismiss='modal') x
                .modal-body
                    #create-word
                        input#new-word-name(type='text', placeholder='Type in a word name')
                        input#new-word-def(type='text', placeholder='Define it....')
                .modal-footer
                    a.btn(href='#', data-dismiss='modal') Close
                    a#add-word.btn.btn-primary(href='#', data-dismiss='modal') Add Word!
相关阅读:
Top