时间戳

首页 > 解决方案 > 将数据从按钮传递到模态 boostrap

javascript - 将数据从按钮传递到模态 boostrap

问题描述

我打开模式的页面上的按钮元素都是同一页面，我想在打开按钮时将数据从按钮传递到模式。有没有办法在没有或使用 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>

我需要将data-id=1235从按钮传递到id="iconLink1"的模态主体锚元素。我将不胜感激任何帮助

标签： javascriptjqueryhtmlbootstrap-modal

解决方案

在 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 加载它。

推荐阅读