javascript - Bootstrap 模态在点击它的主体时触发其他模态

Question

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

这是打开的:

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

为什么这两个连接在一起，所以点击第一个 body 会打开另一个 body ？

Answer 1

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

我通过将模态框移出主 html 更新了您的 fiddle ，它按预期工作。

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