html - Bootstrap 3 嵌套模态——背景 z-index 和点击关闭模态

我正在开发一个 Web 应用程序 (Asp.Net MVC 5)，用户必须在其中创建许多数据记录并映射到其他记录。用户必须能够创建到现有或新创建记录的映射。

一个典型的例子是创建一个地址:

用户打开网站创建地址
他进入了街道和街道等普通领域。
他可以从表中选择一个现有的城市(地址所在的城市)
如果所需的城市尚不存在，他可以创建一个新城市
...对于城市，他可以选择一个国家或创建(与地址和城市相同)

选择是使用 Bootstrap 模式实现的。按下选择按钮(如选择城市)会显示一个包含表格的模式，该表格显示表格中的所有可选记录。带有表格的模态包含一个添加新按钮以添加新实体，这会打开另一个模态。

为了能够重用 View ，我将代码拆分为部分 View ，如下所示:

_CreateAddress => 仅包含创建地址的表单
_CreateAddressModal => 包含 _CreateAddress 的模式
_SelectAddressModal => 包含用于显示所有地址的表格的模式。模态还包含 _CreateAddressModal，当用户点击添加新按钮时将显示它
_CreateCity => 只包含创建城市的表单
_CreateCityModal => 包含 _CreateAddressModal 的模式
_SelectCityModal => 包含显示所有城市的表格的模式。模态还包含 _CreateCityModal，当用户点击添加新按钮时将显示它

……等等

我有两个问题:

点击背景不会关闭打开的模式
最顶部模态的背景具有比所有其他模态更低的 z-index，因此不会隐藏其他模态

我尝试在模态显示中设置背景的 z-index，以确保它们隐藏其他模态，但这没有用 => 背景显示在当前模态之上。

这是一个显示问题的 fiddle :jsFiffle

SO 不允许我在不向问题添加代码的情况下链接到 JSFiddle，所以这里是代码:

HTML:

<!-- Create Address -->
<div id="CreateAddress" class="modal fade fullScreen" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Create Address</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                              <strong>Placeholder</strong> Here is the form to create an address
                    <button class="btn btn-default" id="selectCityButton">select city</button>
                        </div>
                <button class="btn btn-primary">OK (not implemented)</button>
                <button class="btn btn-default modalCloseButton"
                        data-modalid="CreateAddress">Cancel</button>
            </div>
        </div>
    </div>
</div>

<!-- Select City -->
<div id="SelectCity" class="modal fade fullScreen" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Select a City</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                              <strong>Placeholder</strong> Here is a table to select an existing city
                        </div>
                <button class="btn btn-success btn-block" id="createCityButton">Create new city</button>
                <button class="btn btn-primary">OK (not implemented)</button>
                <button class="btn btn-default modalCloseButton"
                        data-modalid="SelectCity">Cancel</button>
            </div>
        </div>
    </div>
</div>

<!-- Create City -->
<div id="CreateCity" class="modal fade fullScreen" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Create City</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                              <strong>Placeholder</strong> Here is the form to create a city
                    <button class="btn btn-default" id="selectCountryButton">select country of city</button>
                        </div>
                <button class="btn btn-primary">OK (not implemented)</button>
                <button class="btn btn-default modalCloseButton"
                        data-modalid="CreateCity">Cancel</button>              
              <!-- Select Country -->
              <div id="SelectCountry" class="modal fade fullScreen" tabindex="-1" role="dialog">
                  <div class="modal-dialog" role="document">
                      <div class="modal-content">
                          <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                              </button>
                              <h4 class="modal-title">Select a Country</h4>
                          </div>
                          <div class="modal-body">
                              <div class="alert alert-info">
                                  <strong>Placeholder</strong> Here is a table to select an existing country
                              </div>
                              <button class="btn btn-success btn-block" id="createCountryButton">Create new country</button>
                              <button class="btn btn-primary">OK (not implemented)</button>
                              <button class="btn btn-default modalCloseButton"
                                      data-modalid="SelectCountry">Cancel</button>
                          </div>
                      </div>
                  </div>
              </div>
              <!-- Select Country END -->
              <!-- Create Country -->
              <div id="CreateCountry" class="modal fade fullScreen" tabindex="-1" role="dialog">
                  <div class="modal-dialog" role="document">
                      <div class="modal-content">
                          <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                              </button>
                              <h4 class="modal-title">Create Country</h4>
                          </div>
                          <div class="modal-body">
                              <div class="alert alert-info">
                                  <strong>Placeholder</strong> Here is the form to create a country
                              </div>
                              <button class="btn btn-primary">OK (not implemented)</button>
                              <button class="btn btn-default modalCloseButton"
                                      data-modalid="CreateCountry">Cancel</button>
                          </div>
                      </div>
                  </div>
              </div>
              <!-- Create Country END -->

            </div>
        </div>
    </div>
</div>

<button class="btn btn-primary btn-block" id="openModal">Open Modal</button>

JS:

var zIndex = 10000;
    // Displys the given modal on top of everything else
    // modal: The modal to display as jQuery object
    // Does not work => remove thw first two lines to see the problem
    function displayModalOnTop(modal) {
    // remove me
    modal.modal('show');
    return;
    // end remove
        zIndex += 2;
        modal.css('z-index', zIndex);
        modal.modal('show');
        setTimeout(function () {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    }

$(function(){
  $('#openModal').on('click', function(){
      displayModalOnTop($('#CreateAddress'));
  });

  // generic close modal handler
  $('.modalCloseButton').on('click', function(){
      var $this = $(this);
      var modalId = $this.attr('data-modalid');
      $('#' + modalId).modal('hide');
  })

  // Select city click
  $('#selectCityButton').on('click', function(){
      displayModalOnTop($('#SelectCity'));
  });

  // Create city click
  $('#createCityButton').on('click', function(){
      displayModalOnTop($('#CreateCity'));
  });

  // Select country click  
  $('#selectCountryButton').on('click', function(){
      displayModalOnTop($('#SelectCountry'));
  });

  // Create country click
  $('#createCountryButton').on('click', function(){
      displayModalOnTop($('#CreateCountry'));
  });
});

CSS:

.modal.fullScreen {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 48px;
}
.modal.fullScreen .modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}
.modal.fullScreen .modal-body.noPadding {
  padding: 0;
}
.modal.fullScreen .modal-dialog {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.modal.fullScreen .modal-header {
  background-color: #3276b1;
  color: #fff;
}
.modal.fullScreen .modal-header .close {
  color: #FFF;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  font-size: 30px;
}
.modal.fullScreen .modal-header .close:hover {
  opacity: 1 !important;
}

最佳答案

问题是模态覆盖了孔屏。由于模态框的边缘，背景是可见的，但不可点击，因为它完全被模态框覆盖了。从模式中删除边距并将其添加到模式对话框解决了这个问题。

关于html - Bootstrap 3 嵌套模态——背景 z-index 和点击关闭模态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41360594/

html - Bootstrap 3 嵌套模态——背景 z-index 和点击关闭模态

上一篇：javascript - 如果快速移动幻灯片，为什么 Flex slider 事件后不触发？

下一篇：javascript - 更改不确定的剑道进度条的颜色并为其添加自定义标签