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

Question

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

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

我尝试添加以下功能但不起作用：

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

Answer 1

如果你将模态内容高度设置为368px，这将有效，因为这是第一个弹出模式的大小。

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

See updated jsfiddle here.

＆＃13;

＆＃13;

// 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');
		});	

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;