[英]Pass value to modal on button click
当用户单击“更多详细信息”按钮时,我想以模式显示我的卡的更多详细信息,我已经看到了有关此问题的答案,但是我不希望该信息出现在输入字段中。 可以请人帮我吗?
<button class="open-homeEvents btn btn-primary" data-id="2014-123456" data-toggle="modal" data-target="#modalHomeEvents">More Details</button>
MODAL
<div id="modalHomeEvents" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="height:50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<label>Student ID</label>
<input type="hidden" name="eventId" id="eventId"/>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); ">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
使用Javascript
<script type="text/javascript">$(document).on("click", ".open-homeEvents", function () {
var eventId = $(this).data('id');
$(".modal-body #eventId").val( eventId );
});</script>
除了使用输入字段,您还可以为id, div
或span
创建一个容器元素,并使用.html()
jQuery方法更新该元素的内容。
$(document).on("click", ".open-homeEvents", function () { var eventId = $(this).data('id'); $('#idHolder').html( eventId ); });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Modal</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> </head> <body> <button class="open-homeEvents btn btn-primary" data-id="2014-123456" data-toggle="modal" data-target="#modalHomeEvents">More Details</button> <div id="modalHomeEvents" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header" style="height:50px;"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <label>Student ID</label> <input type="hidden" name="eventId" id="eventId"/> <span id="idHolder"></span> </div> <div class="modal-footer"> <input type="submit" class="btn btn-primary" value="Login" name="login" style="background-color:rgb(0,30,66); "> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.