jquery – 如何在一个bootstrap模式中绑定动态数据

前端之家收集整理的这篇文章主要介绍了jquery – 如何在一个bootstrap模式中绑定动态数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的形式有一个模态
  1. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  2. <div class="modal-dialog">
  3. <div class="modal-content">
  4. <div class="modal-header">
  5. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  6. <h4 class="modal-title" id="myModalLabel">Image Tag Description</h4>
  7. </div>
  8. <div class="modal-body">
  9. <p id="desc">
  10. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  11. </p>
  12. <h2 id="cost">Cost : 20$</h2>
  13. </div>
  14. <div class="modal-footer">
  15. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  16. <button type="button" class="btn btn-default" data-dismiss="modal">Edit</button>
  17. <button type="button" class="btn btn-primary">Save changes</button>
  18. </div>
  19. </div>
  20. </div>
  21. </div>

我有多个toggel莫代尔的按钮.
按钮的Html如下

  1. <button class="btn btn-primary tag_cnt" data-trigger="hover"
  2. data-target="#myModal" data-toggle="modal" type="button"
  3. style="top:144px; left:510px" value="1"></button>

我的表格中有多个按钮.现在我必须在每个按钮单击中调用相同的模态,我想在模态中动态显示数据.什么是解决方案?

解决方法

您可以将动态变量传递给函数,然后在函数中使用该变量来“手动”打开模态:
  1. <button class="btn btn-primary tag_cnt" style="top:144px; left:510px" onclick="showModal('data')" type="button" value="1"></button>

在您的JavaScript中,您可以像这样访问:

  1. function showModal(data)
  2. {
  3. //you can do anything with data,or pass more data to this function. i set this data to modal header for example
  4. $("#myModal .modal-title").html(data)
  5. $("#myModal").modal();
  6. }

猜你在找的jQuery相关文章