javascript - 如何将第二个模态放在第一个模态的顶部？

我有一个模态叠加在另一个模态之上。如何将第二个模态放在第一个模态的顶部？参见jsFiddle here。

我目前遇到的问题是将第二个模式恰好位于第一个模式的顶部。第一个模态似乎忽略了滚动条占用的空间，但是第二个模态却没有，因此第二个模态似乎向右移动，并且比第一个模态小（仅是我的假设）。

我尝试添加以下内容，但不起作用：

.modal-content {
    margin: auto !important;
}

最佳答案

如果您将模式内容高度设置为368px，则将起作用，因为这是第一个弹出模式的大小。

.modal-content {
  min-height: 368px;
}

See updated jsfiddle here.

// bootstrap 3.3.6
// jquery 2.2.1
// fontawesome 4.5.0

		/*
			MODAL STACKING
		*/
		// Backdrop z-index fix
		$(document).on('show.bs.modal', '.modal', function () {
			var zIndex = 1040 + (10 * $('.modal:visible').length);
			$(this).css('z-index', zIndex);
			setTimeout(function() {
				$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
			}, 0);
		});
		// Scrollbar fix
		$(document).on('hidden.bs.modal', '.modal', function () {
			$('.modal:visible').length && $(document.body).addClass('modal-open');
		});	

.modal-content {
    margin: auto !important;
    min-height: 368px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<section id="services" class="padding-bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 text-center">
                            <h1 class="section-heading turquoise">At Your Service</h1>
                            <hr class="underlined_orange">
                        </div>
                    </div>
                    <div class="row">
                        <!-- Thumbnail -->
                        <div class="col-lg-3 col-sm-6 text-center">
                            <a href="#" title="More about Branding &amp; Marketing" target="_self" data-toggle="modal" data-target="#marketing">
                                <div class="service-box">
                                    <i class="fa fa-5x fa-globe turquoise sr-icons" aria-hidden="true"></i>
                                    <h2 class="orange">Service 1</h2>
                                    <p>About Service 1</p><br>
                                    <p class="turquoise automaticaBRK"><br><span class="btn btn-default sketchFlowPrint">Open Modal</span><br></p>
                                </div>
                            </a>
                        </div>

                        <!-- Branding & Digital Marketing Modal -->
                        <div class="modal fade" id="marketing" tabindex="-1" role="dialog" aria-labelledby="marketing-xLabel">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times orange" aria-hidden="true"></i></button>
                                        <h1 class="modal-title" id="marketing-xLabel">Service</h1>
                                    </div>
                                    <div class="modal-body text-center">
                                        <div class="row">
                                            <div class="col-sm-6 service-box">
                                                <i class="fa fa-5x turquoise fa-home" aria-hidden="true"></i>
                                                    <br><br>
                                                    <h2>Less info</h2>
                                                <button type="button" class="btn btn-default automaticaBRK" data-toggle="modal" data-target="#brandingOptions">See Even More about this service</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Modal -->
                        <div class="modal fade" id="brandingOptions" tabindex="-1" role="dialog" aria-labelledby="brandingOptions-xLabel">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times orange" aria-hidden="true"></i></button>
                                        <h1 class="modal-title" id="brandingOptions-xLabel">More about Service</h1>
                                    </div>
                                    <div class="modal-body text-center">
                                        <div class="row">
                                            <div class="col-xs-12">
                                            	<div class="housePlanPackage">
                                                    <i class="fa fa-5x turquoise fa-home" aria-hidden="true"></i>
                                                    <br><br>
                                                    <h2>Too much info</h2>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                          </div>
                      </div>
                    </div>
                </div>
            </section>