2

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

这是打开的：

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

为什么将两者连接起来，以便单击第一个主体打开另一个主体？

4

1 回答 1

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

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

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

于 2013-11-04T15:51:25.080 回答