1
我使用JavaScript打開第一個模式，並打開其他模式。 第一個模式是可以的，其他的也可以正常工作，但是第二個和第三個模式發生問題。問題是滾動去背景我的模式不滾動時內容超過流量。我從另一個模式打開一個引導模式，但我的模態是可滾動的其他不滾動
給我解決這個問題。 並給其他貪利創建這種類型的着陸風格
<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**
我已經嘗試這一個，但工作。 我正在做同樣的事情在下面的網站，並希望像那樣做。 我很震驚爲什麼不爲我工作。並且我對此沒有任何意見:(:( http://jsbin.com/pokuwehira/edit?html,css –
請發佈完整的代碼或JSbin/JSfiddle，因爲它更容易重現錯誤 – pudi