Скопировать из одного div в другой.
Здравствуйте. Есть код модального окна, в котором отображается фото.
<!-- Модальное окно для отображения увеличения по клику (<a href="#" class="thumbnail"><img src="..." alt="..." class="img-thumbnail"></a>)--> <div class="modal fade" id="image-modal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-title">Просмотр изображения</div> </div> <div class="modal-body"> <img class="img-responsive center-block" src="" alt=""> <BR /> <div id="znach2"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div> <!-- Модальное окно (end)--> Вот сам скрипт: <script> // После загрузки DOM-дерева (страницы) $(function() { //при нажатии на ссылку, содержащую Thumbnail $('a.thumbnaill').click(function(e) { //отменить стандартное действие браузера e.preventDefault(); //присвоить атрибуту scr элемента img модального окна //значение атрибута scr изображения, которое обёрнуто //вокруг элемента a, на который нажал пользователь $('#image-modal .modal-body img').attr('src', $(this).find('img').attr('src')); //открыть модальное окно $("#image-modal").modal('show'); }); //при нажатию на изображение внутри модального окна //закрыть его (модальное окно) $('#image-modal .modal-body img').on('click', function() { $("#image-modal").modal('hide') }); }); </script> Вот ссылка вызова окна: <a href="#" class="thumbnaill"><center><img src="../img/help/metering_director_img/3.png" alt="" class="img-thumbnail" style="width:78%;"></center></a> Собственно задача: Скрипт получает значение scr из img и выводит содержимое в модальное окно. К каждой фотке есть описание <div id="znach"><font color="green" size="2px">Описание фотографии</ol></font></div> Описание фотографий находится в div с одинаковым id у всех. Как изменить скрипт, чтобы он в качестве параметра брал не только src из img но и содержимое блока div по которому прошло нажатие? Т.е. из <div id="znach"></div> который находится рядом с фоткой в пустой <div id="znach2"></div> который находится в коде модального окна в начале страницы? Заранее спасибо):help: :help: |
Нужен полный код! или ссылка
хотя-бы расстояние между двух кусков <a href="#" class="thumbnaill"><center><img src="../img/help/metering_director_img/3.png" alt="" class="img-thumbnail" style="width:78%;"></center></a> <!-- что тут??? --> <div id="znach"><font color="green" size="2px">Описание фотографии</ol></font></div> |
<a href="#" class="thumbnaill"> <center> <img src="../img/help/metering_help_img/Measurements/3.png" alt="Замеры" class="img-thumbnail" style="width:20%;"> </center> </a> <blockquote>Описание</blockquote> Вот общий блок. В нем и ссылка и описание. Сократил немного, чтобы в "многотекста" не ковыряться. |
<?php session_start(); //Подключение к БД // include('../include_connect.php'); require_once( implode( DIRECTORY_SEPARATOR, [ '..', 'include_pdo_connect.php' ] ) );//Навигационное меню include('include_menu.php'); //Начало времени загрузки документа ?> <div id="filters"> </div> </div> </div> <div id='main-page-wrap'> <?php include('include_top-line.php'); ?> <div class='content'> <div class='container-fluid'> <div class='row'> <div class='col-md-4 col-sm-12'> <h1>Справка</h1> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="tab-content"> <a href="#" class="thumbnaill"> <center> <img src="../img/help/metering_help_img/Measurements/3.png" alt="Замеры" class="img-thumbnail" style="width:20%;"> </center> </a> <blockquote>Описание</blockquote> </div> </div> </div> </div> </div> </div> <script> // После загрузки DOM-дерева (страницы) $(function() { //при нажатии на ссылку, содержащую Thumbnail $('a.thumbnaill').click(function(e) { //отменить стандартное действие браузера e.preventDefault(); //присвоить атрибуту scr элемента img модального окна //значение атрибута scr изображения, которое обёрнуто //вокруг элемента a, на который нажал пользователь $('#image-modal .modal-body img').attr('src', $(this).find('img').attr('src')); //открыть модальное окно $("#image-modal").modal('show'); }); //при нажатию на изображение внутри модального окна //закрыть его (модальное окно) $('#image-modal .modal-body img').on('click', function() { $("#image-modal").modal('hide') }); }); </script> </body> </html> Вот код рабочей страницы. Модальное окно подтягивается include('include_menu.php'); |
windmix,
нужен html одного блока ссылки с описанием :-? |
windmix,
и где в коде id="znach"? |
Да я сократил и почистил пример. Чтобы еще самому начать по новой разбираться.
<a href="#" class="thumbnaill"> <center> <img src="../img/help/metering_help_img/Measurements/3.png" alt="Замеры" class="img-thumbnail" style="width:20%;"> </center> <div class="znach">Описание</div></a> |
Вот это блок ссылки с описанием
|
windmix,
$('#image-modal #znach2').html($('.znach', this).html()); строка 12 |
Цитата:
$('.znach', this).html() Над этой частью мудрил сидел |
Часовой пояс GMT +3, время: 20:20. |