Bootstrap Modal工作但它无法正常显示

Question

我真的需要你的帮助。我正在尝试使用bootstrap模式。我花了3-4个小时才使它工作。鉴于我使用模板，似乎正在重写bootstrap javascript。我找到了一种让它发挥作用的方法。

但是现在，问题是模型显示没有样式：

之前：

之后：

我真的需要你的帮助，我被困在这里，我真的不知道如何解决这个问题。 bootstrap.css看起来适用于所有工作表，所以我不确定这是否是问题。

以下我称之为模态：

<div class="modal-backdrop fade in"  ></div>
   <div class="modal hide fade in" id="myModal" style="display: none;">
       <div class="modal-header">
           <a class="close" href="#">×</a>
           <h3>Modal Heading</h3>
       </div>
       <div class="modal-body">
            <p>One fine body…</p>
       </div>
       <div class="modal-footer">
           <a class="btn primary" href="#">Primary</a>
           <a class="btn secondary" href="#">Secondary</a>
       </div>
</div>

<div class="bs-docs-example" style="padding-bottom: 24px;">
       <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large" data-backdrop="static" >Launch demo modal</a>
</div>

感谢您的帮助！

Answer 1

检查出来：http://jsfiddle.net/nAUSm/

<!--<div class="modal-backdrop fade in"  ></div>-->
   <div class="modal hide fade in" id="myModal" style="display: none;">
       <div class="modal-header">
           <a class="close" href="#">×</a>
           <h3>Modal Heading</h3>
       </div>
       <div class="modal-body">
            <p>One fine body…</p>
       </div>
       <div class="modal-footer">
           <a class="btn primary" href="#">Primary</a>
           <a class="btn secondary" href="#">Secondary</a>
       </div>
    </div>

<div class="bs-docs-example" style="padding-bottom: 24px;">
       <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large" data-backdrop="static" >Launch demo modal</a>
</div>

我通过评论第一个div来实现它。我不确定那是什么。

编辑：关闭按钮也不起作用，所以我在此处修复了它：http://jsfiddle.net/nAUSm/1/

Answer 2

我知道答案太迟了，但万一其他人在寻找解决方案，

bootstrap模型弹出窗口的标准div结构如下所示。

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal title goes here</h4>
            </div>
            <div class="modal-body">
                Some text to popup
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

在这种情况下，您错过了“模态对话框”和“模态内容”类。如果需要，请替换div id“myModal”。

希望这有帮助。