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/

为什么两者连接在一起，以便点击第一个身体打开另一个？

Answer 1

将您的模态移到主html之外。我会推荐靠近</body>标记末尾的某个地方。
另外，请注意一些关于模态的标记，例如： <div class="modal-dialog">和<div class="modal-content">用于Bootstrap 3.0，因为您使用的引导程序2.3.2并不是真的需要它。

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

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

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

1 个答案: