我使用javascript打开第一个模态并打开其他模态。 第一个模态是正常的，其他工作也正常，但问题发生在第二和第三模态。问题是当内容过流时滚动转到后台我的模态不滚动。
给我这个问题的解决方案。 并给其他menthods创造这种着陆风格
<div id="beginnerModal" class="modal fade" data-backdrop="static" data-keyboard="false" role="dialog">
<div class="modal-dialog">
<div class="modal-content dealBg">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Hey ${memberFirstName}, <small>Update Company Information</small></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="cold-md-3 col-sm-3 col-xs-12">
<div id="">
<img src="../images/dummyCompanyLogo.png" id="logo" class="img-responsive">
</div>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#logo')
.attr('src', e.target.result)
/* .width(150)
.height(200);*/
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</div>
<div class="cold-md-9 col-sm-9 col-xs-12 form-horizontal form-label-left">
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-12 control-label">Company Logo</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="file" onchange="readURL(this);" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-12 control-label">Phone</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-12 control-label">Location</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-12 control-label">Domain Name</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="text" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<p class="pull-left">Step 1 of 3</p>
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-backdrop="static" data-target="#personalInfo" >Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal" data-backdrop="static" data-target="#personalInfo">Skip</button>
</div>
</div>
</div>
</div>
<div id="personalInfo" class="modal fade" data-backdrop="static" data-keyboard="false" role="dialog">
<div class="modal-dialog">
<div class="modal-content dealBg">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><small>Update Personal Information</small></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="cold-md-3 col-sm-3 col-xs-12">
<div id="userImage">
<img src="../images/dummyProfilePhoto.jpg" id="userPic" class="img-responsive">
</div>
<script>
function showPic(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#userPic')
.attr('src', e.target.result)
/* .width(150)
.height(200);*/
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</div>
<div class="cold-md-9 col-sm-9 col-xs-12 form-horizontal form-label-left">
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-12 control-label">Company Logo</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="file" onchange="showPic(this);" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-12 control-label">Phone</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-12 control-label">Location</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-12 control-label">Domain Name</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="text" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<p class="pull-left">Step 2 of 3</p>
<button type="button" class="btn btn-primary" >Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal" data-backdrop="static" data-target="#inviteUser">Skip</button>
</div>
</div>
</div>
</div>
<div id="inviteUser" class="modal fade" data-backdrop="static" data-keyboard="false" role="dialog">
<div class="modal-dialog ">
<div class="modal-content dealBg">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> <small>Invite your colleagues</small></h4>
</div>
<div class="modal-body">
<div class="row" >
<div class="cold-md-10 col-sm-10 col-xs-12 form-horizontal form-label-left" id="users">
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-12 control-label">User 1</label>
<div class="col-md- col-sm-9 col-xs-12">
<input type="email" class="form-control" name="user1" placeholder="Email Address"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-12 control-label">User 2</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<input type="text" class="form-control" name="user2" placeholder="Email Address"/>
</div>
</div>
</div>
</div>
<div class="row">
<script>
$(function(){
var user=2;
$('#addNewUser').on('click',function(){
user++;
if(user<=12){
var r= $('<div class="form-group"> ' +
'<label class="col-md-3 col-sm-3 col-xs-12 control-label">User ' + user+
' </label> ' +
'<div class="col-md-9 col-sm-9 col-xs-12">' +
'<input type="text" class="form-control" name=" user'+user+'" placeholder="Email Address"/>' +
'</div></div>');
$("#users").append(r);
}
});
});
</script>
<div class="cold-md-10 col-sm-10 col-xs-12 form-horizontal form-label-left">
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-12 pull-right control-label">
<a href="#" id="addNewUser"><i class="fa fa-plus"> </i> Add User</a>
</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<p class="pull-left">Step 3 of 3</p>
<button type="button" class="btn btn-primary" >Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Skip</button>
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
$('#beginnerModal').modal('show');
});
</script>**strong text**
答案 0 :(得分：0)
我认为这个人和你有同样的问题。如果您的问题是您无法滚动模式中的内容。
How to put scrollbar only for modal-body in bootstrap modal dialog