Bootstrap 3嵌套模态 - 单击

Question

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

典型案例是创建地址：

• 用户打开网站以创建地址
• 他进入正常的街道，如街道和街道等。
• 他可以从表中选择现有城市（地址所在的位置）
• 如果所需城市尚不存在，则可以创建新城市
• ...对于城市，他可以选择国家或创建（与地址和城市相同）

使用引导模式实现选择。 按下选择按钮（如选择城市）会显示一个模式，其中包含一个表格，显示表格中的所有可选记录。 带有表格的模态包含一个添加新按钮以添加新实体，这将打开另一个模态。

为了能够重用视图，我将部分视图中的代码拆分为：

• _CreateAddress =＆gt;仅包含用于创建地址的表单
• _CreateAddressModal =＆gt;包含_CreateAddress
的模式

• _SelectAddressModal =＆gt;包含显示所有地址的表的模态。模态还包含_CreateAddressModal，当用户点击添加新按钮时将显示该文件

• _CateateCity =＆gt;仅包含用于创建城市的表单

• _CateateCityModal =＆gt;包含_CreateAddressModal
的模态
• _SelectCityModal =＆gt;包含显示所有城市的表格的模态。模态还包含_CreateCityModal，当用户点击添加新按钮时会显示_CreateCityModal

......等等

我有两个问题：

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

我试图在模态显示中设置背景的z-index，以确保它们隐藏其他模态但这不起作用=＆gt;背景显示在当前模态之上。

这是一个显示问题的小提琴：jsFiffle

所以如果没有在问题中添加代码，我就不会链接到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;
}

Answer 1

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

Answer 2

而不是自己编写这么多代码并通过自己维护所有内容，只需在下面的代码片段中给出。

＆＃13;

＆＃13;

function simpleSHow(title)
			{
				var msg=$('#simple-div');
				
				BootstrapDialog.show({
					title : title,
					message: $('#simple-div'),
					onhide : function(){
						$('#hidden-div').append(msg);
					}
				});
			}
			
			function complexSHow(title)
			{
				var msg=$('#complex-div');
				
				BootstrapDialog.show({
					title : title,
					message: $('#complex-div'),
					onhide : function(){
						$('#hidden-div').append(msg);
					}
				});
			}
			
			function showDiv1(div_id)
			{
				var msg=$('#lavel-2_div-1');
				BootstrapDialog.show({
					title : 'Level 2 Title',
					message: $('#lavel-2_div-1'),
					onhide : function(){
						$('#hidden-div').append(msg);
					}
				});
			}
			
			function showDiv2(div_id)
			{
				var msg=$('#lavel-2_div-2');
				BootstrapDialog.show({
					title : 'Level 2 Title',
					message: $('#lavel-2_div-2'),
					onhide : function(){
						$('#hidden-div').append(msg);
					}
				});
			}
			
			function showDiv3(div_id)
			{
				var msg=$('#lavel-2_div-3');
				BootstrapDialog.show({
					title : 'Level 2 Title',
					message: $('#lavel-2_div-3'),
					onhide : function(){
						$('#hidden-div').append(msg);
					}
				});
			}
			
			function showDiv4(div_id)
			{
				var msg=$('#lavel-2_div-4');
				BootstrapDialog.show({
					title : 'Level 2 Title',
					message: $('#lavel-2_div-4'),
					onhide : function(){
						$('#hidden-div').append(msg);
					}
				});
			}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/css/bootstrap-dialog.min.css" rel="stylesheet">


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/js/bootstrap-dialog.min.js"></script>



<!--  This is a container Div which contains all the div to show when bootstrap dialog opens -->
<div style="display : none" id="hidden-div">
  <div id="simple-div">
    <h1>This is H1 Heading</h1>
    This is most simple coding
    <br>
    <button type="button" class="btn btn-primary" onclick="showDiv1()">Lavel-2 div-1</button>
    <button type="button" class="btn btn-primary" onclick="showDiv2()">Lavel-2 div-2</button>
  </div>

  <div id="lavel-2_div-1">
    <h3>This is Level 2 Header</h3>
    <span style="color : blue;">This is Level 2 Message 1</span>
  </div>

  <div id="lavel-2_div-2">
    <h3>This is Level 2 Header</h3>
    <span style="color : greenyellow;">This is Level 2 Message 2</span>
  </div>

  <div id="lavel-2_div-3">
    <h3>This is Level 2 Header</h3>
    <span style="color : pink;">This is Level 2 Message 3</span>
  </div>
  <div id="lavel-2_div-4">
    <h3>This is Level 2 Header</h3>
    <span style="color : green;">This is Level 2 Message 4</span>
  </div>

  <div class="container-fluid" id="complex-div">

    <button type="button" class="btn btn-primary" onclick="showDiv3()">Lavel-2 div-3</button>
    <button type="button" class="btn btn-primary" onclick="showDiv4()">Lavel-2 div-4</button>
    <h2>Panels with Contextual Classes</h2>
    <div class="panel-group">
      <div class="panel panel-default">
        <div class="panel-heading">Panel with panel-default class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-primary">
        <div class="panel-heading">Panel with panel-primary class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-success">
        <div class="panel-heading">Panel with panel-success class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-info">
        <div class="panel-heading">Panel with panel-info class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-warning">
        <div class="panel-heading">Panel with panel-warning class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-danger">
        <div class="panel-heading">Panel with panel-danger class</div>
        <div class="panel-body">Panel Content</div>
      </div>
    </div>
  </div>

</div>

&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
<button type="button" class="btn btn-primary" onclick="simpleSHow('Hello 1234')">Simple Div Show</button>
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
<button type="button" class="btn btn-primary" onclick="complexSHow('Complex 1234')">Complex Div Show</button>

＆＃13;

＆＃13;

＆＃13;