Bootstrap HTML 模态重叠

Question

我有一个非常奇怪的问题。我的 HTML 代码可能有些愚蠢。我有一个 HTML 页面，其中有两个 bootstrap 模态 div。我将使用 jQuery 调用这些模态。当我包含一个时它工作正常，但是当我的页面上有多个时，它的 DOM 重叠。请帮忙。

两个模态 div 在我的 html 标签的正文中：

    <!-- Modal : Add/Edit Home Phone -->
  <div class="modal fade" id="AddHomePhoneModel" tabindex="-1" role="dialog" aria-labelledby="HomePhoneModelLabel">
      <div id="AddHomePhoneModalDialog" class="modal-dialog" >
        <div class="modal-content" id="AddHomePhoneModalContent">
          <div class="modal-header" id="AddHomePhoneModalHeader">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Add / Edit Home Phone</h4>
          </div>
          <div class="modal-body" id="AddHomePhoneModalBody">               
                <form class="form-horizontal" id="AddHomePhoneModelForm" role="form">

                  <div class="divToUpdate" />

                  <input type="hidden" name="phone_number_id" class="PhoneNumberId"/>
                  <input type="hidden" name="HomeContact_TimeStampID" class="HomeContact_TimeStampID"/>
                  <input type="hidden" name="hps_modified_by" class="hps_modified_by" />

                  <div class="form-group">
                    <label for="home_phone_country" class="col-xs-4 control-label">Country Code</label>
                    <div class="col-xs-6">
                      <input type="text" name="home_phone_country" class="form-control" id="home_phone_country" >
                    </div>
                    <small class="help-block with-errors"></small>
                  </div>

                  <div class="form-group">
                    <label for="home_phone_number" class="col-xs-4 control-label">Phone Number</label>
                    <div class="col-xs-6">
                      <input type="text" name="home_phone_number" class="form-control" id="home_phone_number" >
                    </div>
                    <small class="help-block with-errors"></small>
                  </div>

                  <div class="form-group">
                    <label for="home_phone_status" class="col-xs-4 control-label">Can contact?</label>
                    <div class="col-xs-6" id="home_phone_status">
                        <label class="radio-inline">
                          <input type="radio" name="home_phone_status" id="HPSY" value="Y"> Yes
                        </label>
                        <label class="radio-inline">
                          <input type="radio" name="home_phone_status" id="HPSN" value="N"> No
                        </label>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="home_phone_sms_status" class="col-xs-4 control-label">Contact via SMS?</label>
                    <div class="col-xs-6" id="home_phone_sms_status">
                        <label class="radio-inline">
                          <input type="radio" name="home_phone_sms_status" id="HPSSY" value="Y" required> Yes
                        </label>
                        <label class="radio-inline">
                          <input type="radio" name="home_phone_sms_status" id="HPSSN" value="N" required> No
                        </label>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="home_preferred_contact_flag" class="col-xs-4 control-label">Preferred Contact?</label>
                    <div class="col-xs-6" id="home_preferred_contact_flag">
                        <label class="radio-inline">
                          <input type="radio" name="home_preferred_contact_flag" id="HPCFY" value="Y" required> Yes
                        </label>
                        <label class="radio-inline">
                          <input type="radio" name="home_preferred_contact_flag" id="HPCFN" value="N" required> No
                        </label>
                    </div>
                  </div>

                </form>
                <div class="bg-danger" id="AddHomePhoneMsg"/>
          </div>
          <div class="modal-footer" id="AddHomePhoneModalFooter">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button id="AddNewHomePhoneBtn" data-loading-text="Saving..." type="button" onclick="AddNewHomePhoneHbase();" class="btn btn-primary" disabled>Save changes</button>
          </div>
        </div>
      </div>
    </div>  

  <!-- Modal : Add/Edit Email -->
  <div class="modal fade" id="AddEmailModel" tabindex="-1" role="dialog" aria-labelledby="EmailModelLabel">
      <div class="modal-dialog" id="AddEmailModalDialog">
        <div class="modal-content" id="AddEmailModalContent">
          <div class="modal-header" id="AddEmailModalHeader">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Add / Edit Email</h4>
          </div>
          <div class="modal-body" id="AddEmailModalBody">               
                <form class="form-horizontal" id="AddEmailModelForm" role="form">

                  <div class="divToUpdate" />

                  <input type="hidden" name="phone_number_id" class="PhoneNumberId"/>
                  <input type="hidden" name="Email_TimeStampID" class="Email_TimeStampID"/>
                  <input type="hidden" name="es_modified_by" class="es_modified_by" />

                  <div class="form-group">
                    <label for="email" class="col-xs-4 control-label">Email</label>
                    <div class="col-xs-6">
                      <input type="email" name="email" class="form-control" id="email" >
                    </div>
                    <small class="help-block with-errors"></small>
                  </div>

                  <div class="form-group">
                    <label for="email_type" class="col-xs-4 control-label">Email Type</label>
                    <div class="col-xs-6" id="email_type">
                        <select class="form-control" name="email_type">
                          <option value="Personal">Personal</option>
                          <option value="Office">Office</option>
                          <option value="Home">Home</option>
                        </select>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="preferred_email_status" class="col-xs-4 control-label">Preferred Email</label>
                    <div class="col-xs-6" id="preferred_email_status">
                        <label class="radio-inline">
                          <input type="radio" name="preferred_email_status" id="PrefEmailY" value="Y"> Yes
                        </label>
                        <label class="radio-inline">
                          <input type="radio" name="preferred_email_status" id="PrefEmailN" value="N"> No
                        </label>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="email_status" class="col-xs-4 control-label">Active Email</label>
                    <div class="col-xs-6" id="email_status">
                        <label class="radio-inline">
                          <input type="radio" name="email_status" id="EmailStatY" value="Y" required> Yes
                        </label>
                        <label class="radio-inline">
                          <input type="radio" name="email_status" id="EmailStatN" value="N" required> No
                        </label>
                    </div>
                  </div>
                </form>
                <div class="bg-danger" id="AddEmailMsg"/>
          </div>
          <div class="modal-footer" id="AddEmailModalFooter">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button id="AddNewEmailBtn" data-loading-text="Saving..." type="button" onclick="AddNewEmailHbase();" class="btn btn-primary" disabled>Save changes</button>
          </div>
        </div>
      </div>
    </div>

但是当我使用浏览器查看它时，两个模态都显示为嵌套模态，例如：

感谢任何帮助。我将在同一页面中有更多模型，并希望将其保留在同一页面中。

Answer 1

在我看来你没有正确关闭模态框。试试这个：

        <!-- Modal : Add/Edit Home Phone -->
<div class="modal fade" id="AddHomePhoneModel" tabindex="-1" role="dialog" aria-labelledby="HomePhoneModelLabel">
    <div id="AddHomePhoneModalDialog" class="modal-dialog" >
        <div class="modal-content" id="AddHomePhoneModalContent">
            <div class="modal-header" id="AddHomePhoneModalHeader">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Add / Edit Home Phone</h4>
            </div>
            <form class="form-horizontal" id="AddHomePhoneModelForm" role="form">
                <div class="modal-body" id="AddHomePhoneModalBody">
                    <div class="divToUpdate" />
                        <input type="hidden" name="phone_number_id" class="PhoneNumberId"/>
                        <input type="hidden" name="HomeContact_TimeStampID" class="HomeContact_TimeStampID"/>
                        <input type="hidden" name="hps_modified_by" class="hps_modified_by" />
                        <div class="form-group">
                            <label for="home_phone_country" class="col-xs-4 control-label">Country Code</label>
                            <div class="col-xs-6">
                                <input type="text" name="home_phone_country" class="form-control" id="home_phone_country" >
                            </div>
                            <small class="help-block with-errors"></small>
                        </div>
                        <div class="form-group">
                            <label for="home_phone_number" class="col-xs-4 control-label">Phone Number</label>
                            <div class="col-xs-6">
                                <input type="text" name="home_phone_number" class="form-control" id="home_phone_number" >
                            </div>
                            <small class="help-block with-errors"></small>
                        </div>
                        <div class="form-group">
                            <label for="home_phone_status" class="col-xs-4 control-label">Can contact?</label>
                            <div class="col-xs-6" id="home_phone_status">
                                <label class="radio-inline">
                                    <input type="radio" name="home_phone_status" id="HPSY" value="Y"> Yes
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="home_phone_status" id="HPSN" value="N"> No
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="home_phone_sms_status" class="col-xs-4 control-label">Contact via SMS?</label>
                            <div class="col-xs-6" id="home_phone_sms_status">
                                <label class="radio-inline">
                                    <input type="radio" name="home_phone_sms_status" id="HPSSY" value="Y" required> Yes
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="home_phone_sms_status" id="HPSSN" value="N" required> No
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="home_preferred_contact_flag" class="col-xs-4 control-label">Preferred Contact?</label>
                            <div class="col-xs-6" id="home_preferred_contact_flag">
                                <label class="radio-inline">
                                    <input type="radio" name="home_preferred_contact_flag" id="HPCFY" value="Y" required> Yes
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="home_preferred_contact_flag" id="HPCFN" value="N" required> No
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="bg-danger" id="AddHomePhoneMsg"/>
                    </div>
                </div>
                <div class="modal-footer" id="AddHomePhoneModalFooter">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="AddNewHomePhoneBtn" data-loading-text="Saving..." type="button" onclick="AddNewHomePhoneHbase();" class="btn btn-primary" disabled>Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Modal : Add/Edit Email -->
<div class="modal fade" id="AddEmailModel" tabindex="-1" role="dialog" aria-labelledby="EmailModelLabel">
    <div class="modal-dialog" id="AddEmailModalDialog">
        <div class="modal-content" id="AddEmailModalContent">
            <div class="modal-header" id="AddEmailModalHeader">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Add / Edit Email</h4>
            </div>
            <form class="form-horizontal" id="AddEmailModelForm" role="form">
                <div class="modal-body" id="AddEmailModalBody">

                    <div class="divToUpdate" />
                        <input type="hidden" name="phone_number_id" class="PhoneNumberId"/>
                        <input type="hidden" name="Email_TimeStampID" class="Email_TimeStampID"/>
                        <input type="hidden" name="es_modified_by" class="es_modified_by" />
                        <div class="form-group">
                            <label for="email" class="col-xs-4 control-label">Email</label>
                            <div class="col-xs-6">
                                <input type="email" name="email" class="form-control" id="email" >
                            </div>
                            <small class="help-block with-errors"></small>
                        </div>
                        <div class="form-group">
                            <label for="email_type" class="col-xs-4 control-label">Email Type</label>
                            <div class="col-xs-6" id="email_type">
                                <select class="form-control" name="email_type">
                                    <option value="Personal">Personal</option>
                                    <option value="Office">Office</option>
                                    <option value="Home">Home</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="preferred_email_status" class="col-xs-4 control-label">Preferred Email</label>
                            <div class="col-xs-6" id="preferred_email_status">
                                <label class="radio-inline">
                                    <input type="radio" name="preferred_email_status" id="PrefEmailY" value="Y"> Yes
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="preferred_email_status" id="PrefEmailN" value="N"> No
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email_status" class="col-xs-4 control-label">Active Email</label>
                            <div class="col-xs-6" id="email_status">
                                <label class="radio-inline">
                                    <input type="radio" name="email_status" id="EmailStatY" value="Y" required> Yes
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="email_status" id="EmailStatN" value="N" required> No
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="bg-danger" id="AddEmailMsg"/>
                    </div>
                </div>
                <div class="modal-footer" id="AddEmailModalFooter">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="AddNewEmailBtn" data-loading-text="Saving..." type="button" onclick="AddNewEmailHbase();" class="btn btn-primary" disabled>Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

Bootstrap HTML 模态重叠

Bootstrap Modal overlapping in HTML

html

jquery

bootstrap-modal