Question

SETUP
我有一个盒子网格（模态触发器）。每个方框打开一个模态。每个模态内部都是一个非常简单的缩略图库，其中包含一个主图像和缩略图。单击缩略图会将主图像替换为较大版本。

问题（此序列中的第4步......）
（1）打开模态A，主图像显示 - 很棒！
（2）单击模态A中的第二个拇指，主图像变为该拇指的较大版本 - 很棒！（3）关闭模态A - 太棒了！（4）打开模态B，主图像不是模态B的第一个拇指，但它是模态B的第二个缩略图的较大图像 - 不是那么大！模态B记得我从模态A中选择了第二个拇指，所以它显示的是模态B的第二个拇指，而不是第一个拇指。

问题
如何（以及在哪里）添加代码以便模式“忘记”在最后一个模态中选择的内容？或者每次打开模态时重置？如果我选择模态A的第3张图像，但打开模态B并且它没有第3张缩略图，则此问题非常严重 - 因为主图像将为空白。我是否将代码应用于模态或库jquery？这让我疯狂！

MODAL PLUGIN
custombox.js

THUMBNAIL PLUGIN
simplegallery.js

JQUERY TO FIRE MODAL

$(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 TO FIRE GALLERY

$(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>

的修改
小提琴！小提琴！小提琴！ - ＆GT; http://jsfiddle.net/zuhloobie/nLhcejsz/

（1）单击模态A，参见模态主图像A1和右侧的拇指A1和A2 （2）点击拇指A2，看主图像变为A2
（3）关闭模态A，打开模态B
（4）看到主图像是B2，而不是B1（记得第二个拇指在模态A中被点击所以它显示了模态B的第二个拇指）

希望有所帮助！：）

Answer 1

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

当模态打开时，我通过触发第一个拇指上的点击来实现它：

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

Updated Fiddle

Answer 2

可能是一个hackjob。但试一试。在click函数的.info中添加以下代码：

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

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

小提琴：http://jsfiddle.net/praveenscience/nLhcejsz/2/

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（）重新加载模态：

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

更新后的提问：http://jsfiddle.net/nLhcejsz/6/

现在应该按照您的要求进行操作，模式会忘记单击哪个缩略图并相应地重置。

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() 之前我加载内容就完成了工作。

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

Modal是“记住”以前模态中的代码

5 个答案: