使用jQuery更改模式内容 [英] Changing Modal content using jQuery
本文介绍了使用jQuery更改模式内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用twitter bootstrap的模式制作弹出表单.
I am using twitter bootstrap's modal to make a pop up form.
下面是显示模态形式的代码.
This is the following code that shows the modal form.
第一模式表格
<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".两个按钮取消并在下面继续.我试图使两个按钮动态.我要在这里做的是，当单击取消时，模态将关闭.单击继续后，主体将动态更改为其他模态内容.
The above codes produces a caption "Continue". Two buttons cancel and Continue below. I am trying to make the two buttons dynamic. What I am about to do here is that when cancel is clicked, the modal will close . When continue is clicked, the body will change dynamically to the other modal content.
我相信这涉及到javascript/jQuery，但我想不出任何办法解决此问题.请赐教.非常感谢！
I believe there is javascript/jQuery involve in this but I can't think of any way to work around this. Please enlighten me. Thanks a lot!
推荐答案
褪色示例
$("#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>
这篇关于使用jQuery更改模式内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
