Question

嗨，我真的想了解为什么我的初始模态步骤无法在正确的高度初始化。用于将包含div的父级设置为正确高度的角度指令在第一个模态步骤中不起作用。为什么？此外，我正在使用外部文件，并认为以下plunker链接是这个问题的更好的演示。基本上，我使用bootstrap模式并插入一个ui-view，其路由由ui-router控制。没什么大不了的，但包含高度的父级崩溃所以我使用jquery来设置包含div的高度，以便页脚适当地向下移动。它无法在第一个模态步骤上工作，我无法做其他事情。

https://plnkr.co/edit/qpFfckmh8ExbRlqzROhM?p=preview

var app = angular.module("app", ["ui.router"]);

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
	.state("step1", {
		url: "/step1",
		templateUrl: "step1.html"
	})
	.state("step2", {
		url: "/step2",
		templateUrl: "step2.html"

	})
	.state("step3", {
		url: "/step3",
		templateUrl: "step3.html"

	});
	$urlRouterProvider.otherwise('/');
})

app.controller("appController", ["$scope", "$location", function($scope, $location) {
	$scope.clickJoin = function($state) {
		$location.path("step1");

		showHidePrevNextBtns();
	}
	
	$scope.clickNext = function($state) {
		if($location.path() === "/step2") {
			 $location.path("step3");

		}
		if($location.path() === "/step1") {
			 $location.path("step2");
	
		} 
		showHidePrevNextBtns();
	};
	
	$scope.clickPrevious = function($state) {
		if($location.path() === "/step2") {
			$location.path("step1");

		}
		if($location.path() === "/step3") {
			$location.path("step2");

		}
		showHidePrevNextBtns();
	};
	
	function showHidePrevNextBtns() {
		if($location.path() === "/step2" || $location.path() === "/step3") $scope.previousBtn = true;
		else $scope.previousBtn = false;

		if($location.path() === "/step1" || $location.path() === "/step2") $scope.nextBtn = true;
		else $scope.nextBtn = false;
	}
}]);

app.directive("banner", function() {
    return function (scope, element, attrs) {
        $(element).parent().height($(element).height());
    }
});

/* Styles go here */

.modal-container {
  position: relative;
}

.modal-step {
  position: absolute;
  width: 100%;
}

#status-buttons div { 
	color:#FFF; 
	display:inline-block; 
	font-size:12px; 
	margin-right:10px; 

	text-transform:uppercase; 
}

#status-buttons span{ 
	color:#000000; 
	display:inline-block; 
	font-size:12px; 
	margin-right:10px; 

	text-transform:uppercase; 
	
	background:#ffffff; display:block; height:30px; margin:0 auto 10px; padding-top:5px; width:30px; 
    border-radius:50%; 
}

#status-buttons span.active   { 
	background-color:#C32026; 
	color: #ffffff;
}

<!DOCTYPE html>
<html lang="en"> 
<head> 
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link href="app.css" rel="stylesheet">



</head>
<body ng-app="app" ng-controller="appController">

	<div class="container">
		<h2>Modal Example</h2>
	  
		<div class="btn-group dropdown">
			<button class="btn" data-toggle="modal" data-target="#joinModal" ng-click="clickJoin()"><i class="fa fa-thumbs-up"></i>Join</button>
		</div>
										
		<!-- Modal -->
		<div class="modal fade" id="joinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content" >
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title italic" id="myModalLabel">Become a Member Today!</h4>
					</div>
													
					<!-- NAVIGATION -->
					<div class="page-header text-center" >
						<h2>Step</h2>
						<div id="status-buttons">
							<div><span >1</span></div>
							<div><span>2</span></div>
							<div><span>3</span></div>
						</div>
					</div>
													
					<div class="modal-body" style="border: red solid 1px">
						<div class="modal-container" style="border: blue solid 1px;">
							<div class="modal-step" banner ui-view style="border: black solid 1px"></div>
						</div>
						
					</div>
					<br />
					
					<br />
					<br />
													
					<div class="modal-footer">
						<div class="col-xs-2">
							<button type="button" id="previousBtn" ng-show="previousBtn" class="btn btn-sm btn-default" ng-click="clickPrevious()"><i class="fa fa-arrow-left"></i> Previous</button>
						</div>
						<div class="col-xs-1">
						</div>
						<div class="col-xs-2">
							<button type="button" id="nextBtn" ng-show="nextBtn" class="btn btn-sm btn-default" ng-click="clickNext()">Next <i class="fa fa-arrow-right"></i></button>
						</div>
						<div class="col-xs-4">
						</div>
						<div class="col-xs-3">
							<button type="button" id="submitBtn" class="btn btn-sm btn-default" ng-click="clickSubmit()">Submit</button>
						</div>
					</div>
				</div>
			</div>								
		</div>
	</div>					

	
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
	
	<script src="app.js"></script>
	
	

</body>
</html>

Answer 1

将此css添加到您的模态正文将解决问题。

.modal-body {
  max-height: 100%;
}

Answer 2

＆＃13;

.modal-step {
  position: relative;
  display: table; //important 
}

＆＃13;

https://plnkr.co/edit/zZnojKCaeeiTUb42FW5I?p=preview

将其添加到app.css是我开始工作的唯一方法

难以设置Bootstrap模态容器的高度，包含ui-view的子元素的更改

2 个答案: