在模态基础中打开图像

Question

我想在基础模式中打开一个img。

我有以下代码：

<img src="images/medium/Pluto.jpg" style="margin-left:10px;margin-right:10px; max-height:150px;max-width:150px"/>

和

<div id="modalDialogPhotoView" class="reveal-modal " data-reveal>       
</div>

我将在照片上创建一个事件onclick并在modalDialogPhotoView中显示该照片。

我该怎么做？

Answer 1

为图像添加ID，例如：

<img id="image1" src="images/medium/Pluto.jpg" style="margin-left:10px;margin-right:10px; max-height:150px;max-width:150px"/>

然后在javascript中试试这个：

// Put the photo in the modal and show that modal if hidden
var appendImgToModal = function(event) {
    $('#image1').appendTo($('#modalDialogPhotoView'));
    $('#image1').show();
}
// Set the function to call when the user clicks the photo
$('#image1').on('click', appendImgToModal);