Bootstrap Modal overlapping in HTML

Question

I have a very wiered problem. Might be something stupid I have got on my HTML Code. I have an HTML page which has two bootstrap modal divs. I will use jQuery to call up these modals. When I include one it works fine, but when I have more than one on my page, its DOM is overlapping. Please help.

The two modal divs are in the body of my html tag as :

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

But when I view it using a browser both the modals are appearing as nested ones like :

Any help is appreaciated. I will have a couple of more models in the same page, and will want to retain it in the same page.

Answer 1

It looks to me like you havent closed your modals correctly. Try this:

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