Question

我正在尝试使用Bootstrap v3.3.4制作模态。当我使用“模态淡入淡出”类并单击标签时它不会出现，但是当我在“模态输入”中写入时它会出现。我希望模态在点击时淡入淡出。我应该研究哪些想法或文件？

head
    link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
body
    a(href='#', data-toggle='modal', role='button', data-target='#modalPassword') Change Password
    div(id='modalPassword', class='modal fade', tabindex='-1', role='dialog')
        div(class='modal-dialog')
            div(class='modal-content')
                div(class='modal-header')
                    button(type='button', class='close', data-dismiss='modal')&times;
                    h4(class='modal-title') Change Password

这是我知道我的模态正常工作的代码：

body
    a(href='#', data-toggle='modal', role='button', data-target='#modalPassword') Change Password
    div(id='modalPassword', class='modal in', tabindex='-1', role='dialog')
        // More code here

我个人的CSS：

.modal.in{
    display: block;
}

Answer 1

确保button和×

之间的标记空格和空格

button(type='button', class='close', data-dismiss='modal') ×

添加此更改后，

代码可以正常使用

html 
    head
        title
        link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css')
    body

        a(href='#', data-toggle='modal', role='button', data-target='#modalPassword') Change Password
        div(id='modalPassword', class='modal fade', tabindex='-1', role='dialog')
            div(class='modal-dialog')
                div(class='modal-content')
                    div(class='modal-header')
                        button(type='button', class='close', data-dismiss='modal') &times;
                        h4(class='modal-title') Change Password
        script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
        script(type='text/javascript', src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')

Bootstrap的模态不会褪色

1 个答案: