title: Bootstrap Modal overlapping in HTML
body: <p>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.</p>
  
  <p>The two modal divs are in the body of my html tag as :</p>
  
  <pre><code>    &lt;!-- Modal : Add/Edit Home Phone --&gt;
    &lt;div class="modal fade" id="AddHomePhoneModel" tabindex="-1" role="dialog" aria-labelledby="HomePhoneModelLabel"&gt;
        &lt;div id="AddHomePhoneModalDialog" class="modal-dialog" &gt;
          &lt;div class="modal-content" id="AddHomePhoneModalContent"&gt;
            &lt;div class="modal-header" id="AddHomePhoneModalHeader"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
              &lt;h4 class="modal-title" id="myModalLabel"&gt;Add / Edit Home Phone&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body" id="AddHomePhoneModalBody"&gt;               
                  &lt;form class="form-horizontal" id="AddHomePhoneModelForm" role="form"&gt;
  
                    &lt;div class="divToUpdate" /&gt;
  
                    &lt;input type="hidden" name="phone_number_id" class="PhoneNumberId"/&gt;
                    &lt;input type="hidden" name="HomeContact_TimeStampID" class="HomeContact_TimeStampID"/&gt;
                    &lt;input type="hidden" name="hps_modified_by" class="hps_modified_by" /&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label for="home_phone_country" class="col-xs-4 control-label"&gt;Country Code&lt;/label&gt;
                      &lt;div class="col-xs-6"&gt;
                        &lt;input type="text" name="home_phone_country" class="form-control" id="home_phone_country" &gt;
                      &lt;/div&gt;
                      &lt;small class="help-block with-errors"&gt;&lt;/small&gt;
                    &lt;/div&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label for="home_phone_number" class="col-xs-4 control-label"&gt;Phone Number&lt;/label&gt;
                      &lt;div class="col-xs-6"&gt;
                        &lt;input type="text" name="home_phone_number" class="form-control" id="home_phone_number" &gt;
                      &lt;/div&gt;
                      &lt;small class="help-block with-errors"&gt;&lt;/small&gt;
                    &lt;/div&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label for="home_phone_status" class="col-xs-4 control-label"&gt;Can contact?&lt;/label&gt;
                      &lt;div class="col-xs-6" id="home_phone_status"&gt;
                          &lt;label class="radio-inline"&gt;
                            &lt;input type="radio" name="home_phone_status" id="HPSY" value="Y"&gt; Yes
                          &lt;/label&gt;
                          &lt;label class="radio-inline"&gt;
                            &lt;input type="radio" name="home_phone_status" id="HPSN" value="N"&gt; No
                          &lt;/label&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label for="home_phone_sms_status" class="col-xs-4 control-label"&gt;Contact via SMS?&lt;/label&gt;
                      &lt;div class="col-xs-6" id="home_phone_sms_status"&gt;
                          &lt;label class="radio-inline"&gt;
                            &lt;input type="radio" name="home_phone_sms_status" id="HPSSY" value="Y" required&gt; Yes
                          &lt;/label&gt;
                          &lt;label class="radio-inline"&gt;
                            &lt;input type="radio" name="home_phone_sms_status" id="HPSSN" value="N" required&gt; No
                          &lt;/label&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label for="home_preferred_contact_flag" class="col-xs-4 control-label"&gt;Preferred Contact?&lt;/label&gt;
                      &lt;div class="col-xs-6" id="home_preferred_contact_flag"&gt;
                          &lt;label class="radio-inline"&gt;
                            &lt;input type="radio" name="home_preferred_contact_flag" id="HPCFY" value="Y" required&gt; Yes
                          &lt;/label&gt;
                          &lt;label class="radio-inline"&gt;
                            &lt;input type="radio" name="home_preferred_contact_flag" id="HPCFN" value="N" required&gt; No
                          &lt;/label&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                  &lt;/form&gt;
                  &lt;div class="bg-danger" id="AddHomePhoneMsg"/&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer" id="AddHomePhoneModalFooter"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;button id="AddNewHomePhoneBtn" data-loading-text="Saving..." type="button" onclick="AddNewHomePhoneHbase();" class="btn btn-primary" disabled&gt;Save changes&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;  
  
    &lt;!-- Modal : Add/Edit Email --&gt;
    &lt;div class="modal fade" id="AddEmailModel" tabindex="-1" role="dialog" aria-labelledby="EmailModelLabel"&gt;
        &lt;div class="modal-dialog" id="AddEmailModalDialog"&gt;
          &lt;div class="modal-content" id="AddEmailModalContent"&gt;
            &lt;div class="modal-header" id="AddEmailModalHeader"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
              &lt;h4 class="modal-title" id="myModalLabel"&gt;Add / Edit Email&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body" id="AddEmailModalBody"&gt;               
                  &lt;form class="form-horizontal" id="AddEmailModelForm" role="form"&gt;
  
                    &lt;div class="divToUpdate" /&gt;
  
                    &lt;input type="hidden" name="phone_number_id" class="PhoneNumberId"/&gt;
                    &lt;input type="hidden" name="Email_TimeStampID" class="Email_TimeStampID"/&gt;
                    &lt;input type="hidden" name="es_modified_by" class="es_modified_by" /&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label for="email" class="col-xs-4 control-label"&gt;Email&lt;/label&gt;
                      &lt;div class="col-xs-6"&gt;
                        &lt;input type="email" name="email" class="form-control" id="email" &gt;
                      &lt;/div&gt;
                      &lt;small class="help-block with-errors"&gt;&lt;/small&gt;
                    &lt;/div&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label for="email_type" class="col-xs-4 control-label"&gt;Email Type&lt;/label&gt;
                      &lt;div class="col-xs-6" id="email_type"&gt;
                          &lt;select class="form-control" name="email_type"&gt;
                            &lt;option value="Personal"&gt;Personal&lt;/option&gt;
                            &lt;option value="Office"&gt;Office&lt;/option&gt;
                            &lt;option value="Home"&gt;Home&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label for="preferred_email_status" class="col-xs-4 control-label"&gt;Preferred Email&lt;/label&gt;
                      &lt;div class="col-xs-6" id="preferred_email_status"&gt;
                          &lt;label class="radio-inline"&gt;
                            &lt;input type="radio" name="preferred_email_status" id="PrefEmailY" value="Y"&gt; Yes
                          &lt;/label&gt;
                          &lt;label class="radio-inline"&gt;
                            &lt;input type="radio" name="preferred_email_status" id="PrefEmailN" value="N"&gt; No
                          &lt;/label&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class="form-group"&gt;
                      &lt;label for="email_status" class="col-xs-4 control-label"&gt;Active Email&lt;/label&gt;
                      &lt;div class="col-xs-6" id="email_status"&gt;
                          &lt;label class="radio-inline"&gt;
                            &lt;input type="radio" name="email_status" id="EmailStatY" value="Y" required&gt; Yes
                          &lt;/label&gt;
                          &lt;label class="radio-inline"&gt;
                            &lt;input type="radio" name="email_status" id="EmailStatN" value="N" required&gt; No
                          &lt;/label&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/form&gt;
                  &lt;div class="bg-danger" id="AddEmailMsg"/&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer" id="AddEmailModalFooter"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;button id="AddNewEmailBtn" data-loading-text="Saving..." type="button" onclick="AddNewEmailHbase();" class="btn btn-primary" disabled&gt;Save changes&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>But when I view it using a browser both the modals are appearing as nested ones like :</p>
  
  <p><a href="https://i.stack.imgur.com/JkZID.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JkZID.gif" alt="enter image description here"></a></p>
  
  <p>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. </p>