Javascript 如何为多个按钮调用相同的模式
我在另一个页面(modal.html)和另一个页面(career.php)中分别使用了bootstrap模式和按钮。虽然可以使用,但我希望链接多个按钮的相同模式。我不知道该怎么做Javascript 如何为多个按钮调用相同的模式,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我在另一个页面(modal.html)和另一个页面(career.php)中分别使用了bootstrap模式和按钮。虽然可以使用,但我希望链接多个按钮的相同模式。我不知道该怎么做 $(文档).ready(函数(e){ $('#btnModal')。单击(函数(){ //使用ajaz post $.post('modal.html',函数(xx){ $('#tmpModal').html(xx)//用modal.html内容填充div tmpModal。。!! //呼叫模态 $('testMod
$(文档).ready(函数(e){
$('#btnModal')。单击(函数(){
//使用ajaz post
$.post('modal.html',函数(xx){
$('#tmpModal').html(xx)//用modal.html内容填充div tmpModal。。!!
//呼叫模态
$('testModal').modal('show');
})
})
});代码>
&时代;
立即申请
角色
名称
电子邮件
电话
评论
上载文件
接近
发送
添加引导CSS
&JS
<a href="#modal.html" class="btn btn-primary" data-target="#testModal" data-toggle="modal">Modal</a>
<a href="#modal.html" class="btn btn-primary" data-target="#testModal" data-toggle="modal">Modal</a>
<a href="#modal.html" class="btn btn-primary" data-target="#testModal" data-toggle="modal">Modal</a>
<div class="modal fade" id="testModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4>Apply Now</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleFormControlInput1">Role</label>
<input class="form-control" type="text" placeholder="Dest" readonly>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Name</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Full Name" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Phone</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Phone" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlFile1">Upload File</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</div>
<div class="modal-footer">
<div class="btn btn-danger" data-dismiss="modal">Close</div>
<button class="btn btn-primary" onclick="contact_send();">SEND</button>
</div>
</div>
</div>
</div>
&时代;
立即申请
角色
名称
电子邮件
电话
评论
上载文件
接近
发送
只需根据类而不是id进行操作
<button class="btn btn-primary someclassname" id="btnModal">Apply</button>
$('.someclassname') .click(function(){
$.post('modal.html' ,function(xx){
$('#tmpModal').html(xx)
$('#testModal').modal('show');
})
})