在按钮单击时将值传递给模态

本教程将介绍在按钮单击时将值传递给模态的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

在按钮单击时将值传递给模态 教程 第1张

问题描述

当用户单击"更多详细信息"按钮时,我想以模式显示我的卡的更多详细信息,我已经看到了关于此问题的答案,但我不希望信息位于输入字段中。请谁来帮我一下好吗?

 <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">&times;</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、divspan创建容器元素,并使用.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://www.qumuban.com/redirect/aHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjYvY3NzL2Jvb3RzdHJhcC5taW4uY3Nz" target="_blank" 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">&times;</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>

好了关于在按钮单击时将值传递给模态的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。