как передать атрибут data в модальном режиме

Мне нужно передать атрибут data в моем модальном. прикрепить с помощью тега image в src при нажатии на ссылку. Ниже приведен мой код. Я в замешательстве. Я знаю, что мы можем использовать JavaScript onclick метод для передачи по ссылке. Еще кто-нибудь может дать мне исполняемый код. Мой код приведен ниже. Я не очень хорош в создании функций JavaScript. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<a href="#checkImage" data-toggle="modal" data-myimage="imageNamefromDataBase.jpg">  Image </a>
<div class="modal fade" id="checkImage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="color:black;" id="myModalLabel">View Image</h4>
      </div>
      <div class="modal-body" style="color:black;">
        <h1>Fee Submit</h1>
        <img src="#" alt="bank_chalan" id="thanks" />
      </div>
      <div class="modal-footer">       
       <button type='submit' data-dismiss="modal" name='submit' class='btn btn-success'>Close</button>
      </div>
    </div>
  </div>
</div>
2 4
javascript html5 bootstrap-modal

2 ответа:

Если вы хотите включить образы в bootstrap modal, попробуйте что-то вроде этого.

<a id = 'checkImage' >Image</a>
<div id = 'imagemodal' class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">View Image</h4>
      </div>
      <div class="modal-body">
        <h1>Fee Submit</h1>
        <img src="http://www.userlogos.org/files/logos/Karmody/alaTest_Iphone01a.png" id="imagepreview" >
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
 </div>

В вашем JS-файле добавьте это 

$(function() {
    $('#checkImage').on('click', function() {
        $('.imagepreview').attr('src', $(this).find('img').attr('src'));
        $('#imagemodal').modal('show');   
    });     
});
2

Вы можете использовать bootstrap modal event listener show или shown и передать значение атрибута data в <img> 

$('#checkImage').on('show.bs.modal', function (e) {
    var img = $(e.relatedTarget).data('myimage');
    //alert(img);
    $("#thanks").attr("src",img);
});

Рабочий Пример 

	$('#checkImage').on('show.bs.modal', function (e) {
	    var img = $(e.relatedTarget).data('myimage');
	    //alert(img);
	    $("#thanks").attr("src", img);
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<a href="#checkImage" data-toggle="modal" data-myimage="http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png" class="btn btn-default">  Image </a>

<div class="modal fade" id="checkImage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title" style="color:black;" id="myModalLabel">View Image</h4>

            </div>
            <div class="modal-body" style="color:black;">
                 <h1>Fee Submit</h1>

                <img src="#" alt="bank_chalan" id="thanks" />
            </div>
            <div class="modal-footer">
                <button type='submit' data-dismiss="modal" name='submit' class='btn btn-success'>Close</button>
            </div>
        </div>
    </div>
</div>

Скрипка

Множественные Изображения

1