html - Bootstrap Modal 工作，但无法正确显示

Question

我真的需要你的帮助。我正在尝试使用引导模式。我花了 3-4 小时才让它工作。鉴于我使用模板，似乎引导 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…&lt;/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…&lt;/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

我知道这对于答案来说为时已晚，但万一其他人正在寻找解决方案，

引导模型弹出窗口的标准 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>

在这种情况下，您错过了“modal-dialog”和“modal-content”类。如果需要，替换 div id “myModal”。

希望这可以帮助。