我有一组 div,当被选中时会打开一个模式窗口。我希望模态窗口的背景图像 url 从选择打开它的 div 传递。
这是 div 和模态窗口的 html:
<div class="cover-item" style="background-image: url('https://d1nexqccu6ll7z.cloudfront.net/_images/s-14-197-61462CCC-uk.png')"></div>
<div class="cover-item" style="background-image: url('https://d1nexqccu6ll7z.cloudfront.net/_images/s-14-1177-64ACF6EA-uk.png')"></div>
<div class="cover-item" style="background-image: url('https://d1nexqccu6ll7z.cloudfront.net/_images/s-14-1195-057710EE-uk.png')"></div>
<div class="modal-window"></div>
CSS 最初用于隐藏模式,然后在调用时显示它:
.modal-window //hide it out the viewport initially {
-webkit-transform: translate(-50%, -200%);
-ms-transform: translate(-50%, -200%);
transform: translate(-50%, -200%);
background-image: url(/* want to dynamically set this */)
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.modal-window-open //reveal it {
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
我使用的 jQuery 只是在选择一个 div 时打开模态窗口:
$('.cover-item').on('click', function() {
$('.modal-window').toggleClass('modal-window-open');
});
现在如何让特定的 .cover-item
div 在选中时将其背景图像 url 传递给模态窗口?
最佳答案
Try following code
$('.cover-item').on('click', function() {
var bg = $(this).css('background-image');
$('.modal-window').toggleClass('modal-window-open');
$('.modal-window').css("background-image", bg);
});
关于jquery - 如何使用 jQuery 将背景图像 url 从一个 div 传递到另一个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36027314/