在模态基础中打开图像

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);

在模态基础中打开图像

Open image in modal foundation

jquery

zurb-foundation