twitter-bootstrap Bootstrap Modal 可以工作，但无法正常显示

Bootstrap Modal work but it won't display properly

提问by Vinc ?

I really need your help. I am trying to use the bootstrap modal. It took me 3-4 h to make it work. Given that I use a template, it seems the bootstrap javascript was being rewritten. I found a way to make it work.

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

But now, the problem is the model is being displayed without style at all :

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

Before :

前 ：

After :

后 ：

I really need your help, Im stuck here and I really don't know how to solve that. The bootstrap.css look to work for all the sheet, so im not sure if this is the problem.

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

Here how I call the modal :

这里我如何调用 modal ：

<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>

Thank you for your help !

谢谢您的帮助 ！

回答by amamut

Check this out: http://jsfiddle.net/nAUSm/

看看这个：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>

I got it to work by commenting out the first div. I am not sure what it was there for.

我通过注释掉第一个 div 让它工作。我不确定它是做什么用的。

Edit: The close button isn't working either so I fixed it here: http://jsfiddle.net/nAUSm/1/

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

回答by Harsha Nayanajith A.G.

I know this is way too late for the answer, but in case someone else looking for a solution,

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

Standard div structure of bootstrap model popup is as below.

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>

In this case you missed "modal-dialog" and "modal-content" classes. If required replace the div id "myModal".

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

Hope this helps.

希望这可以帮助。