Bootstrap模态窗口的问题

时间:2014-06-25 00:55:46

标签: html twitter-bootstrap twitter-bootstrap-3

第一次在这里发帖。我通过网站搜索过,找不到这个问题的答案,所以我希望有人可能有这个想法:

问题是,当点击主页上的“联系”链接时,模态窗口会显示内容(即按钮/文本),但是当点击“关闭”按钮时,屏幕会变为灰色并且没有响应。

<div class = "modal fade" id = "contact" role = "dialog">
    <div class = "modal-dialog">
        <div class = "modal-content">
            <div class = "modal-header">
                <h4>Contact Tech Site</h4>
            </div>
            <div class = "modal-body">
                                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
            </div>
            <div class = "modal-footer">
                <button type="button" class = "btn btn-default" data-dismiss = "modal">Close</button>
                <button type="button" class = "btn btn-primary" data-dismiss = "modal">Save changes</button>
            </div>
        </div>
    </div>

</div>
</div>

要清楚,这是点击“联系”链接后我的页面的样子: https://www.dropbox.com/s/a8etlue21jfk1ti/Screenshot%202014-06-24%2017.54.27.png

非常感谢任何建议。

1 个答案:

答案 0 :(得分:2)

你有几个问题。您尚未在导航栏中关闭div s,ul。此外,您尚未正确评论此行<!-- maximum 12 grids i.e. no more than 4x "col-md-3" -->等。详细信息:

  1. 您尚未关闭此div div的{​​{1}}。
  2. 未关闭此<div class="navbar navbar-primary navbar-static-top">的{​​{1}}。
  3. 未关闭模式div ul
  4. <ul class="nav navbar-nav navbar-right">

    http://fiddle.jshell.net/52VtD/6726/show/莫代尔工作正常。

    底线

    为了得到你所期望的,你的HTML必须是干净的和语义的,而不会遗漏任何结束元素,