如何以引导方式传递动态数据? [英] How to pass dynamic data in bootstrap modal?

问题描述

我正在努力实现以下目标:

I am trying to achieve the following:

我有一个按钮:

<button id= "<dynamicid>" type="button" class="btn btn-danger btn-sm pull-right" data-toggle="modal" data-target="#mymodal">Open</button>

id属性每次都会更改.现在单击此按钮将打开一个模态.我想要实现的是将这个动态ID放入打开的模式中.

The id attribute changes everytime. Now clicking this button opens up a modal. What I am trying to achieve is get this dynamic id into the modal which opens up.

这是完整的模式:

<div class="modal fade" id="mymodal" data-placement="right" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="padding: 4%; background-color: white; color: #6A6A6A; font-family: 'Crete Round', serif;">
        <input type="submit" class="btn btn-primary btn-sm" value="submit"/>
        <div class="modal-footer">
        </div>
      </div>      
    </div>
</div>
</div>

任何有关此的建议都会有很大帮助.

Any suggestions on this would be of great help.

推荐答案

由于您没有真正确定要使用ID的具体方式，因此在此举一个示例:

As you didn't got really specific on what you want to do with the ID here an example on how it could be done:

$('#mymodal').on('show.bs.modal', function(e) {
    $(this).find('.modal-body').text(e.relatedTarget.id);
});

---

示例

参考:

引导-模式事件

$('#mymodal').on('show.bs.modal', function(e) {
  var id = $(this).find('.modal-body').text(e.relatedTarget.id);
  if(id) console.log(id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button id="whateverID" type="button" class="btn btn-danger btn-sm pull-right" data-toggle="modal" data-target="#mymodal">Open</button>
<div class="modal fade" id="mymodal" data-placement="right" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header" style="padding: 4%; background-color: white; color: #6A6A6A; font-family: 'Crete Round', serif;">
        Header

      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

这篇关于如何以引导方式传递动态数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！