当点击它的主体时，Bootstrap modal 会触发其他 modal答案

【问题标题】：Bootstrap modal triggers other modal when clicked on it's body当点击它的主体时，Bootstrap modal 会触发其他 modal
【发布时间】：2013-11-04 08:37:39
【问题描述】：

我遇到了在一个页面上运行的三种模式之一的问题。当它可见并单击它的主体时，它会打开它后面的另一个主体。

这是打开的：

                <span class="help-block"><a href="#klarnaModal" data-toggle="modal">@Html.Raw(ptype.Description.StripHtml())</a></span>
                <div id="klarnaModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="klarnaModalLabel" aria-hidden="true" data-backdrop="static">
                  <div class="modal-dialog">
                    <div class="modal-contents">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h3 id="klarnaModalLabel">@Html.Raw(ptype.Description)</h3>
                      </div>
                      <div class="modal-body">
                        <iframe src="https://cdn.klarna.com/1.0/shared/content/legal/terms/24637/sv_se/invoice?fee=0"></iframe>
                      </div>
                    </div>
                  </div>
                </div>

以及通过单击另一个主体打开的那个：

<input type="radio" name="paymenttype" id="@ptype.Id" value="@ptype.Id" data-toggle="modal" data-target="#klarnaSubmitModal" data-remote="true" />
     <div id="klarnaSubmitModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="klarnaSubmitModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-contents">
                  <div class="modal-header">
                    <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 id="klarnaSubmitModalLabel"><i class="icon icon-info-sign"></i>Vigtigt</h3>
                  </div>
                  <div class="modal-body">
                    Det er ikke muligt at benytte alternativ leveringsadresse sammen med Klarna Faktura.<br /><br />

                    Vælger du at fortsætte vil din ordre blive leveret til faktureringsadressen.<br /><br />
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-medium btn-primary" id="acceptklarna-btn">
                      <i class="icon icon-ok-sign"></i><b><span>Fortsæt</span></b>
                    </button>
                    <button type="button" class="btn btn-medium btn-primary" id="resetpayment-btn">
                      <i class="icon icon-circle-arrow-down"></i><span>Vælg en anden betalingsmetode</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>

编辑！这重现了我的问题：http://jsfiddle.net/mPWw4/3/

为什么两者是相连的，所以点击第一个主体会打开另一个主体？

【问题讨论】：

我已经用你的 html 设置了一个jsfiddle，并且.. 两个模态都正常为我打开，单击模态的正文没有任何作用
似乎它一定是页面上的其他东西导致了问题。可以是它们的放置方式吗？
可能可以，在此处发布您遇到问题的确切代码，或设置一个重现问题的 jsfiddle 示例
我在这里重现了这个问题：jsfiddle.net/mPWw4/3（点击链接，然后点击modal-header/body）

标签： javascript jquery twitter-bootstrap modal-dialog

【解决方案1】：

将模态框移到主 html 之外。我会推荐靠近 </body> 标签末尾的地方。
另外，作为旁注，您在模态框上的一些标记，例如<div class="modal-dialog"> 和 <div class="modal-content"> 适用于 Bootstrap 3.0，因为您使用的是 bootstrap 2.3.2，您并不真的需要它。

我通过将模态框移出主 html 来更新您的小提琴，它按预期工作。

http://jsfiddle.net/mPWw4/4/

【讨论】：

非常感谢，现在我的头发可以长回来了 ;)