Передача данных из кнопки в модальный бустрап - PullRequest
Новая
       4

Передача данных из кнопки в модальный бустрап

0 голосов
/ 06 июня 2019

Я являюсь элементом кнопки на странице, которая открывает модальную часть, и являются одной и той же страницей, и я хочу передать данные от кнопки модальной, когда она открыта.Есть ли способ достижения этой функциональности без или с помощью 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" .Буду признателен за любую помощь

Ответы [ 3 ]

1 голос
/ 06 июня 2019

В моделях 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.

0 голосов
/ 06 июня 2019

Я бы сделал с этим Jquery, нажав на кнопку, получить значение атрибута 'data-id', добавив его в переменную и затем установив элемент href тега a с идентификатором iconLink1

$('#myButton').click(function() { 
    var _data = $(this).attr('data-id'); 
    $('#iconLink1').attr('href' , _data);
});

Вы также можете проверить щелчок, добавив console log(_data); после удаления новой переменной

0 голосов
/ 06 июня 2019

Вы можете использовать для этого JS / jQuery.

Я не буду давать вам точный код, но вот шаги для вас:

  1. Дайте вашей кнопке id, чтобы вы могли определить через код JS, с каким элементом DOM вы хотите манипулировать / получать данные. например <button id='myButton'>
  2. Получить элемент с document.getElementById('#myButton').
  3. Получите атрибут data-id с помощью функции jQuery: .attr("data-id"). Сохраните его в переменной, если хотите.
  4. В модальном режиме вы теперь имеете доступ к идентификатору данных либо из переменной, в которой вы его сохранили, либо из прямого вызова.
...