Question

我正在尝试将Bootstrap 3慢慢集成到现有站点（在.NET 4.5 MVC上运行，FWIW）。我开发了一个带模态的页面;它将容纳一个联系表单，最终我希望能够从其他页面调用它。

现在的问题是模态不能正常关闭。单击“关闭”按钮时，半透明背景图层将消失，模态将向上和向下滑动 - 但模式会在视口中向右捕捉到中心位置。 }： - （

代码供您考虑...在＆lt; head＆gt;中我们正在呼叫的页面...

<script type="text/javascript" src="/Scripts/modernizr-2.7.2.js"></script>
<script type="text/javascript" src="/js/libs/jquery-1.7.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.1.1.js"></script>
<script type="text/javascript" src="/js/cycle.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Scripts/additional-methods.min.js"></script>
<script type="text/javascript" src="/js/plugins.js"></script>
<script type="text/javascript" src="/js/script.js"></script>

<script type="text/javascript" src="/js/parallax.js"></script>
<script type="text/javascript" src="/js/jquery.colorbox.js"></script>
<script type="text/javascript" src="/js/jquery.hoverintent.js"></script>
<script type="text/javascript" src="/js/jquery.cluetip.js"></script>
<script type="text/javascript" src="/js/mosaic.js"></script>


<link rel="stylesheet" href="/css/style.min.css">


<link rel="stylesheet" href="/Content/bootstrap-grids.min.css" />
<link rel="stylesheet" href="/Content/bootstrap-modal.min.css" />
<link rel="stylesheet" href="/css/CommCtr.min.css" />

然后，模态本身就像这样创建：

<div id="modalFinder" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn btn-xs close" data-dismiss="modal">Close</button>
                <h3 class="modal-title">Please complete the form.</h3>
            </div>
            <article id="modalFinderEmailForm" class="modal-body container">
                <div class="row">
                    <form class="col-md-12 container-fluid" id="FinderEmailForm" name="FinderEmailForm" method="post">
                        <div class="row">
                            <p class="col-md-6">
                                <label for="FirstName">First Name<em class="required">*</em></label>
                                <input type="text" id="FirstName" />
                            </p>
                            <p class="col-md-6">
                                <label for="LastName">Last Name<em class="required">*</em></label>
                                <input type="text" id="LastName" />
                            </p>
                        </div>

            more code...

                        <div class="row">
                            <p class="col-md-12" style="text-align: right;">
                                <input type="hidden" id="destinationEmail" name="destinationEmail" value="" />
                                <input type="hidden" id="destinationBcc" name="destinationBcc" value="comments@example.com" />
                                <button type="button" id="btnFinderSubmit">Submit</button>
                            </p>
                        </div>
                    </form>
                </div>
            </article>
        </div>
    </div>
</div>

我可能做错的一件事是尝试仅包含手头任务的相关CSS（这就是bootstrap-grids.min.css和bootstrap-modal.min.css的内容），我当然可能错过了关键的一块。我试图使用Bootstrap CSS来做所有这些;还有一些我需要的JS吗？

提前致谢！

Bootstrap 3 Modal表现不佳

0 个答案: