Question

我在页面上打开模态的按钮元素都是同一页，并且我想在按钮打开时将数据从按钮传递到模态。有没有办法在不使用javascript / jquery的情况下实现该功能？这是我的标记的html片段

<button class="btn-icone bg-warning" data-toggle="modal" data-target="#modaleIcones"
      data-id=1235> 
      <i value=Radiology class="fa fa-edit"></i>                                                                                      </button>
      
      
<div class="modal fade" id="modaleIcones">
    <div class="modal-dialog" >
        <div class="modal-header">
            
        </div>
        <div class="modal-body">
            <a href="#" id="iconLink1">
               <img src="myImg.png">
            </a>
        </div>
    </div>
</div>

我需要使用 id =“ iconLink1” 将按钮中的 data-id = 1235 传递到模态主体锚点元素。我将不胜感激

Answer 1

在Jquery和Bootstrap模式（已通过版本4测试）中，您可以执行以下操作：

$('[data-toggle="modal"]').on('click.modal.data-api', function(event) {
  var targetModal = $($(this).data('target'));
  var content = $(this).data('content');
  targteModal.find('.modal-content').html(content);
}

例如，您可以仅将模板文件名保存在data-content属性中，然后使用jquery loadtemplate进行加载。

Answer 2

您可能要使用JS / jQuery。

我不会为您提供确切的代码，但是请按照以下步骤操作：

给按钮一个id，这样您就可以通过JS代码识别要从中操作/获取数据的DOM元素。例如<button id='myButton'>
使用document.getElementById('#myButton')获取元素。
使用jQuery函数data-id获取其.attr("data-id")属性。如果需要，可以将其存储到变量中。
现在，在模式中，您可以从存储数据的变量或直接进行调用的方式访问data-id。

Answer 3

我将通过单击按钮来获取此'data-id'的属性值，并将其添加到变量中，然后将a标记的href元素设置为ID {{ 1}}

iconLink1

您还可以通过在对新变量进行无标度处理后添加$('#myButton').click(function() { var _data = $(this).attr('data-id'); $('#iconLink1').attr('href' , _data); });来检查点击次数

将数据从臀部传递到模态Boostrap

3 个答案: