Javascript 如何动态加载模态

您好，我想知道如何在不同的图像上动态加载模式。这是我目前的网页

假设当我点击pi图像的寿命时，这是弹出的模式

我希望其他图像也发生同样的事情。假设我点击Kite Runner图像，它会打开一个模式，左边是Kite Runner图像，右边是文本

这是我当前的代码

$（文档）.ready（函数（）{
var$modal=$（“#myModal”）；
$（“#lifeofpi”）。单击（函数（）{
$modal.show（）；
});
$modal.find（'.close'）。单击（函数（）{
$modal.hide（）；
});
});
/*模式（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.7）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：700px；
高度：500px；
背景色：#101010；
}
/*关闭按钮*/
.结束{
颜色：#AAAAA；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
莫达利菲奥菲先生{
光标：指针；
高度：160px；//高度
//宽度：30%；//宽度
边框：5px纯白；
显示：内联；
边际上限：0px；
位置：绝对位置；
}
莫达尔赫德先生{
颜色：白色；
保证金：0；
左边距：470像素；
}
.modalheadertext{
颜色：白色；
左边距：350px；
边缘顶端：40px；
}
.回顾img{
光标：指针；
高度：160px；//高度
//宽度：30%；//宽度
}

&时代；
圆周率的寿命
出版：
使用类作为选择器，并将图像源设置为图像上的属性。也可以用这种方法填充其他字段

$(document).ready(function() {
    var $modal = $("#myModal");
    $(".modal-img").click(function() {
        $modal.find('img.modallifeofpi').attr('src',$(this).attr('img-src'));
        $modal.find('.modalheader').text($(this).attr('img-title'));
        $modal.show();
    });
    $modal.find('.close').click(function() {
        $modal.hide();
    });
});

和HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class='images'>
<img class="review-img modal-img" id="lifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" img-title="Life of pi" img-src="./images/lifeofpi.jpg" alt="lifeofpi"></img>
<img class="review-img modal-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" img-title="Kite Runner" img-src="./images/kiterunner.jpg" alt="kiterunner"></img> </img>
<img class="review-img modal-img" id="starwars" src="https://images-na.ssl-images-amazon.com/images/I/51oqkfvEwZL._AC_US320_QL65_.jpg" img-title="Star Wars" img-src="./images/starwars.jpg" alt="starwars"></img>
<img class="review-img modal-img" id="twilight" src="https://images-na.ssl-images-amazon.com/images/I/41K99+cInvL._AC_US320_QL65_.jpg" img-title="Twinlight" img-src="./images/twinlight.jpg" alt="twilight"></img>
</section>

<!-- The Modal -->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>

  <img class="modallifeofpi" src=""></img>
  <h1 class="modalheader">Life of pi</h1>
  <h2 class="modalheadertext">Published:</h2>
     </div>
</div>


&时代；
圆周率的寿命
出版：
您只需绑定所有图像并将图像信息传递给modal即可


$（文档）.ready（函数（）{
var$modal=$（“#myModal”）；
$（“.images img”）。单击（函数（）{
$modal.find（'img.modallifeofpi'）.attr（'src'，$（this.attr（'src'））；
$modal.find（'.modalheader'）.text（$（this.attr（'alt'））；
$modal.show（）；
});
$modal.find（'.close'）。单击（函数（）{
$modal.hide（）；
});
});
/*模式（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.7）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：700px；
高度：500px；
背景色：#101010；
}
/*关闭按钮*/
.结束{
颜色：#AAAAA；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
莫达利菲奥菲先生{
宽度：300px；
高度：450px；
边框：5px纯白；
显示：内联；
边际上限：0px；
位置：绝对位置；
}
莫达尔赫德先生{
颜色：白色；
保证金：0；
左边距：470像素；
}
.modalheadertext{
颜色：白色；
左边距：350px；
边缘顶端：40px；
}
.回顾img{
光标：指针；
高度：160px；//高度
//宽度：30%；//宽度
}

&时代；
圆周率的寿命
出版：
将
img
的属性分配给模态，然后显示模态。检查下面的示例


$（文档）.ready（函数（）{
var$modal=$（“#myModal”）；
var src=“”；
$（'.images img'）。单击（函数（）{
$img=$（此项）；
$modal.find（'img'）.attr（'src'），$img.attr（'src'）；
$modal.find（'.modalheader'）.text（$img.attr（'alt'））；
$modal.show（）；
});
$（'#myModal.close'）。单击（函数（）{
$modal.hide（）；
});
});
/*模式（背景）*/
.莫代尔{
显示：无；
/*默认情况下隐藏*/
位置：固定；
/*原地不动*/
z指数：1；
/*坐在上面*/
填充顶部：100px；
/*盒子的位置*/
左：0；
排名：0；
宽度：100%；
/*全宽*/
身高：100%；
/*全高*/
溢出：自动；
/*如果需要，启用滚动*/
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,0.7）；
/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：700px；
高度：500px；
背景色：#101010；
}
/*关闭按钮*/
.结束{
颜色：#AAAAA；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
.回顾img{
光标：指针；
}
莫达利菲奥菲先生{
宽度：300px；
高度：450px；
边框：5px纯白；
显示：内联；
边际上限：0px；
位置：绝对位置；
}
莫达尔赫德先生{
颜色：白色；
保证金：0；
左边距：470像素；
}
.modalheadertext{
颜色：白色；
左边距：350px；
边缘顶端：40px；
}

&时代；
圆周率的寿命
出版：
您忘了在代码段中添加
jQuery
，对不起，我不知道为什么代码段无法正常工作，它在我的网页上的显示方式如何。我在snippet中添加了jquery，您是否有外部源从中获取modals信息，或者您只是将信息与图像一起放在页面上？尝试使用fancybox！我把它链接到jqueryYour代码不起作用它甚至不能生成第一个图像模式