CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapmodal-dialog
nsordk
nsordk

Reputation: 59

Bootstrap modal triggers other modal when clicked on it's body

I am experiencing a problem with one of the three modals running on one page. When it's visible and you click it's body it opens the other one behind it.

This is the opened one:

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

And the one that opens by clicking the other body:

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

EDIT! This reproduces my problem: http://jsfiddle.net/mPWw4/3/

Why is the two connected so that a click on the first ones body opens the other?

Upvotes: 2

Views: 762

Answers (1)

Trevor
Trevor

Reputation: 16116

  1. Move your modals outside of your main html. I would recommend somewhere close to the to the end of your </body> tag.
  2. Also just as a side note some of your markup on the modals e.g. <div class="modal-dialog"> and <div class="modal-content"> is for Bootstrap 3.0 since your using bootstrap 2.3.2 you don't really need it.

I updated your fiddle by moving the modals out of the main html and it works as expected.

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

Upvotes: 1

Related Questions