我正在使用twitter bootstrap的模式制作弹出表单。
下面是显示模态形式的代码。
第一模式表格
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-dialog1">
<!-- Modal content-->
<div class="modal-container">
<div class="modal-header" id="header-modal">
<button type="button" class="close-modal" data-dismiss="modal">×</button>
<h4 class="modal-h2">Modal Header</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h2 id="modal-info-header">Student's Information</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form role="form">
<div class="row">
<div class="col-md-6">
<div class="modal-form-col1">
<label for="guidiantName">First Name</label> <br>
<input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="First Name">
</div>
</div>
<div class="col-md-6">
<div class="modal-form-col2">
<label for="guidiantName">Last Name</label> <br>
<input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Last Name">
</div>
</div>
</div>
<div class="modal-form">
<label for="guidiantName">Address</label> <br>
<input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Address">
</div>
<div class="row">
<div class="col-md-6">
<div class="modal-form-col1">
<label for="guidiantName">Phone Number</label> <br>
<input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Phone Number">
</div>
</div>
<div class="col-md-6">
<div class="modal-form-col2">
<label for="guidiantName">State</label> <br>
<input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="State">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="modal-form-col1">
<label for="guidiantName">Next of Kin</label> <br>
<input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Next of Kin">
</div>
</div>
<div class="col-md-6">
<div class="modal-form-col2">
<label for="guidiantName">Class</label> <br>
<input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Class">
</div>
</div>
</div>
<div class="col-md-12 text-right">
<button id="cancel-btn-modal">Cancel</button>
<button id="continue-btn-modal">Continue</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
第二模态表格
<!-- Modal -->
<div class="modal fade" id="Add-Student-Modal" role="dialog">
<div class="modal-dialog modal-dialog1">
<!-- Modal content-->
<div class="modal-container">
<div class="modal-header" id="header-modal">
<button type="button" class="close-modal" data-dismiss="modal">×</button>
<h4 class="modal-h2">Modal Header</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h2 id="modal-info-header">Guidiant's Information</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form role="form">
<div class="modal-form">
<label for="guidiantName">Guidiance name</label> <br>
<input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Guidiance name">
</div>
<div class="modal-form">
<label for="guidiantName">Address</label> <br>
<input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Address">
</div>
<div class="row">
<div class="col-md-6">
<div class="modal-form-col1">
<label for="guidiantName">Phone Number</label> <br>
<input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Phone Number">
</div>
</div>
<div class="col-md-6">
<div class="modal-form-col2">
<label for="guidiantName">Occupation</label> <br>
<input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Occupation">
</div>
</div>
</div>
<div class="modal-form">
<label for="guidiantName">Email Address</label> <br>
<input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Email Address">
</div>
<div class="col-md-12 text-right">
<button id="preview-btn-modal">Preview</button>
<button id="save-btn-modal">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
以上代码产生标题“ Continue”。两个按钮取消并在下面继续。我正在尝试使两个按钮动态化。我要在这里做的是，当单击取消时，模态将关闭。单击继续后，主体将动态更改为其他模态内容。
我相信这涉及到javascript / jQuery，但我想不出任何办法解决此问题。请赐教。非常感谢！
答案 0 :(得分：5)
$("#modal2Button").click(function() {
$('#modal1').fadeOut();
setTimeout(function() {
$('#modal2').fadeIn();
}, 400)
});
$("#close-button").click(function() {
setTimeout(function() {
$('#modal1').fadeIn();
$('#modal2').fadeOut();
}, 1000)
});.hide-me {
display: none;
}
.show-me {
display: block;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Click Me
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Header</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Modal 1 Content Here -->
<div class="show-me" id='modal1' }>
<h1>THIS IS MODAL 1</h1>
</div>
<!--Modal 2 Content Here-->
<div class='hide-me' id='modal2'>
<h1>Content for 2nd Modal</h1>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="close-button">Close</button>
<button type="button" class="btn btn-primary" id="modal2Button">
Continue
</button>
</div>
</div>
</div>
</div>
$("#modal2Button").click(function() {
$('#modal2').removeClass('hide-me').addClass('show-me')
$('#modal1').removeClass('show-me').addClass('hide-me')
});
$("#close-button").click(function() {
setTimeout(function(){
$('#modal1').removeClass('hide-me').addClass('show-me')
$('#modal2').removeClass('show-me').addClass('hide-me')
},1000)
});.hide-me {
display: none;
}
.show-me {
display: block;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Click Me
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Header</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Modal 1 Content Here -->
<div class="show-me" id='modal1' }>
<h1>THIS IS MODAL 1</h1>
</div>
<!--Modal 2 Content Here-->
<div class='hide-me' id='modal2'>
<h1>Content for 2nd Modal</h1>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="close-button">Close</button>
<button type="button" class="btn btn-primary" id="modal2Button">
Continue
</button>
</div>
</div>
</div>
</div>