模态框“记忆”了之前模态框的代码

Question

设置
我有一个方格框（模态触发器）的网格。每个框都会打开一个模态窗口，在每个模态窗口内都有一个非常简单的缩略图库，包括一个主要图片和若干个缩略图。点击缩略图将用其较大版本替换主要图片。

问题（这一步是第四步...）
（1）打开模态窗口A，主要图片显示-太好了！
（2）在模态窗口A中单击第二个缩略图，主要图片将更改为该缩略图的较大版本-很棒！
（3）关闭模态窗口A-非常好！
（4）打开模态窗口B，主要图片不是模态窗口B的第一个缩略图，而是模态窗口B的第二个缩略图的较大图片-不太好！模态窗口B记住了我在模态窗口A中选择的第二个缩略图，因此显示的是Modal B的第二个缩略图而不是第一个。

问题
如何（在哪里）添加代码以使模态窗口“忘记”上一个模态窗口中选择的内容？或每次打开模态窗口时都重置？如果我选择模态窗口A的第三张图片，但打开模态窗口B并且它没有第三个缩略图-因为主要图片将为空。我应该将代码应用于模态窗口还是图库jQuery？这让我发疯了！

---

模态插件
custombox.js

缩略图插件
simplegallery.js

触发模态的JQUERY

$(document).ready(function () {
    $(".modal img").not(":visible").each(function () {
        $(this).data("src", this.src);
        this.src = "";
    });
    $(".modal").each(function () {
        $(this).data("sourcesAreSet", false);
    });
    $('.info').on('click', function (e) {
        var correspondingModal = $($(this).data('href'));
        if (correspondingModal.data("sourcesAreSet") == false) {
            correspondingModal.find("img").each(function () {
                this.src = $(this).data("src");
            });
            correspondingModal.data("sourcesAreSet", true);
        }
        Custombox.open({
            target: $(this).data('href'),
            effect: 'push',
            speed: 500,
            overlayColor: '#2C3E50',
            overlayClose: false
        });
        e.preventDefault();
    });
});

JQUERY转换为画廊

$(document).ready(function(){
    $('#gallery').simplegallery({
        galltime : 1000, // transition delay
        gallcontent: '.content',
        gallthumbnail: '.thumbnail',
        gallthumb: '.thumb',
    });
});

示例模态框

<div id="modal51" class="modal">
    <div id="portfolioItemClose" class="close"><span></span>
    </div>
    <div class="portfolioTitle wow fadeInLeft" data-wow-delay=".5s" data-wow-duration=".3s">ikuw solutions
    </div>
    <div class="portfolioImageBodyContainer">
        <div class="portfolioImage wow rotateIn" data-wow-delay=".3s" data-wow-duration=".3s">
            <div id="gallery" class="">
                <div class="content">
                    <img src="../../../../../assets/images/portfolio/brochures-flyers/20141117_ikuw_flyer_course-outline_tech.jpg" class="image_1">
                    <img src="../../../../../assets/images/portfolio/brochures-flyers/20141117_ikuw_flyer_course-outline_tech_2.jpg" class="image_2" style="display:none;">
                </div>
            </div>
        </div>
        <div class="portfolioBody wow fadeInDown" data-wow-delay=".5s" data-wow-duration=".3s">
            <div class="portfolioClientDescriptionUsage">
                <div class="portfolioBodyClient wow fadeIn" data-wow-delay=".8s">ikuw solutions</div>
                <div class="portfolioBodyDescription wow fadeIn" data-wow-delay=".9s">technical training course outline</div>
                <div class="portfolioBodyUsage wow fadeIn" data-wow-delay="1s">students</div>
            </div>
            <div class="portfolioBodyText wow fadeIn" data-wow-delay="1.1s">[text]</div>
            <div class="portfolioBodyPDF wow fadeIn" data-wow-delay="1.1s"><a href="../../../../../assets/images/portfolio/brochures-flyers/20141117_ikuw_flyer_course-outline_tech.pdf" target="_blank">View full-scale PDF&nbsp;&nbsp;<span class="fa fa-angle-right"></span></a></div>
            <div class="portfolioBodyLine wow zoomIn" data-wow-delay="1.2s" data-wow-duration=".3s"></div>
            <div class="portfolioBodyVersions wow fadeIn" data-wow-delay="1.3s">pages</div>
            <div class="thumbnail">
                <div class="thumb wow bounceIn" data-wow-delay="1.5s"><a href="#" rel="1"><img src="../../../../../assets/images/portfolio/brochures-flyers/thumb_20141117_ikuw_flyer_course-outline_tech.jpg" id="thumb_1" class="fit"></a></div>
                <div class="thumb wow bounceIn" data-wow-delay="1.6s"><a href="#" rel="2"><img src="../../../../../assets/images/portfolio/brochures-flyers/thumb_20141117_ikuw_flyer_course-outline_tech_2.jpg" id="thumb_2" class="fit"></a></div>
            </div>
        </div>
    </div>
</div>

编辑
测试！测试！测试！ --> http://jsfiddle.net/zuhloobie/nLhcejsz/

(1) 点击弹窗 A，查看主图像 A1 和右侧的缩略图 A1 和 A2
(2) 点击缩略图 A2，查看主图像变为 A2
(3) 关闭弹窗 A，打开弹窗 B
(4) 查看主图像是 B2，而不是B1（它记得在弹窗 A 中单击了第二个缩略图，因此显示了弹窗 B 的第二个缩略图）

希望这有所帮助! :)

- chris

---

不要再沉默了... - chris

这不是你之前在这里问过的同一个问题吗：http://stackoverflow.com/questions/31305037/zoom-effect-only-zooms-original-image-not-new-image-from-thumbnail？ - Dekel

不是那个问题，那个与缩放有关。这是更高级的步骤，涉及清空模态或清除缓存或在打开代码之前重置它。 - chris

我不知道custombox，但它是否可以有多个实例？如果不能，问题可能是您有多个class为modal的元素。 - schellingerht

是的，它可以有多个实例。发布了一个fiddle：http://jsfiddle.net/zuhloobie/nLhcejsz/ - chris

Answer 1

问题在于你只设置了新的src值，但是图片元素本身（在缩略图上单击后隐藏/显示）仍然处于与模态之前相同的状态。

当模态窗口打开时，通过触发第一个缩略图的单击事件，我解决了这个问题。

open: function() {
    correspondingModal.find("#thumb_1").parent("a").trigger("click");
}

更新的代码示例

- sydeslyde

---

我喜欢这个，但是在模态框打开回调中是否有可能重置整个模态框内容？比如在单击时将其清空并重新加载？ - chris

然后使用open函数来清空模态框并使用html()再次填充它。我不明白为什么你要重新加载它。是的，建议的解决方案有点像黑客，但它有效。 - sydeslyde

正如我在Jeroen的帖子中提到的那样，我只能将其清空 - 我无法重新加载它。我认为清空并重新加载它是“正确”的方法。这也是插件作者建议的方法，只是我无法重新加载它？ - chris

更新：这不起作用。当您尝试打开Modal C时，它会失败。如果您打开Modal B并单击Thumb B2...然后关闭Modal B并打开Modal C-主图像将为空白。您的答案仅适用于具有相同数量缩略图的模式-这将不是情况。 - chris

Answer 2

可能是一个粗略的解决方法，但可以尝试。将这段代码添加到.info函数的click中：

$(".content img").hide(0, function () {
    $(".image_1").show();
});

这将有效地“重置”图像：

Fiddle：http://jsfiddle.net/praveenscience/nLhcejsz/2/

- Praveen Kumar Purushothaman

---

在模态框打开回调中，是否可以仅重置整个模态框内容？例如在单击时将其清空并重新加载？ - chris

你的回答本质上与我在回复Jeroen时尝试过的答案相同，而你发表这篇文章的时间是在我之后的三天。 - chris

@chris 但是这与使它为空有关，是吗？ - Praveen Kumar Purushothaman

我的首选是清空模态窗口的内容并重新加载它。如果这样不行，那么我就不得不采取像在Jeroen的帖子中所提到并且已经可以工作的隐藏/显示图像的方法。 - chris

Answer 3

我改变了你最初的.ready()函数的顺序，并尝试保存所有模态框的内容，并在Custombox关闭时重新加载它们。

编辑：通过在Custombox的open()和close()函数上加载内容，已解决无法加载图像的问题。

获取初始模态框内容：

$(".modal").each(function () {
    window['reset' + $(this).attr('id')] = $(this).find('.content').html();
});

在Custombox open()中加载模态框：

open: function(){
            $(".modal").each(function () {
                $(this).find('.content').html(window['reset' + $(this).attr('id')]);
            });
        }

在 Custombox 关闭时重新加载模态框：

close: function(){
            $(".modal").each(function () {
                $(this).find('.content').html(window['reset' + $(this).attr('id')]);
            });
        }

更新的 JSFiddle 示例：http://jsfiddle.net/nLhcejsz/6/

现在这个模态框应该按照你的要求进行操作，它会忘记之前点击的缩略图并相应地重置。

- Glen Despaux Jr

---

我喜欢这个想法……但是我在解决为什么那些图片无法加载的问题时遇到了困难 :/ - chris

我再仔细检查一遍，看看能否做些什么。我相信最终结果会很简单的。 - Glen Despaux Jr

请查看更新后的答案，它现在对我起作用了。 - Glen Despaux Jr

太完美了！非常感谢你，@Glen。真的很感激 :) - chris

太棒了！很高兴我能帮到你！ - Glen Despaux Jr

Answer 4

我也曾经遇到过Bootstrap模态框的同样问题。我为自己找到了一个简单有效的解决方法：

$('.info').on('click', function (e) {
    $(".modal-body").empty(); 
    // Don't know which element should be empty in your example
    // After the empty(), I load the content I need
}

对我而言，在加载内容之前简单地使用.empty()即可完成任务。

- Jeroen Bellemans

---

我想在加载模态框之前清空其所有内容（使用custombox.js的open回调函数）...我可以使用.empty()来实现这一点，但它只是清空内容...不会加载新的内容。 - chris

但我宁愿在模态框打开时清空其内容并重新加载它，而不是调整模态框内的各个部分，因为这可能会涵盖其他潜在问题。 - chris

你能否创建一个 jsfiddle？ - Jeroen Bellemans

我希望能够根据每个模态框的打开回调（或关闭回调）来重置它们。这将解决wow.js动画和图像库中的许多问题。 - chris

你有机会看那个 Fiddle 吗？ - chris

Answer 5

我有一个简单的：

let preventNoMultiple = true;
$('.modal').modal();
$('.Modal').on('shown.bs.modal', function (event) {
  if(preventNoMultiple){// ...do something}
});
$('.Modal').on('hidden.bs.modal', function (event) {preventNoMultiple = false;}

- Sebastian Frankowski