javascript - 如何重新打开语义 ui 模式？

Question

我一直在试图弄清楚为什么我的模态框在我关闭它们后不再显示。如果我想再次看到来自模态的信息，我必须每次都刷新页面。

当我第一次加载页面并点击第一张卡片时，它会显示模态，但是无论我点击第一张卡片多少次，它都不会再加载模态，因为它将它从我设置的位置移除它并将其移动到具有以下类“ui dimmer modals page transition visible active”的 div。知道如何将模态框保留在 DOM 中的位置吗？

下面是我的代码:

HTML:

                <div class="ui three stackable cards">

                    <div class="card">

                        <div class="image">
                            <img src="/Assets/img/products/tfplus.jpg">
                        </div>
                        <div class="content">
                            <div class="header">
                                4Life Transfer Factor Plus
                            </div>
                        </div>

                        <div class="ui modal">

                            <i class="close icon"></i>
                            <div class="header">
                                4Life Transfer Factor Plus
                            </div>

                            <div class="image content">
                                <div class="ui medium image">
                                    <img src="/Assets/img/products/tfplus.jpg">
                                </div>
                                <div class="description">
                                    <div class="ui header">Ingrediente:</div>
                                    <ul>
                                        <li>Zinc</li>
                                        <li>Colostru bovin</li>
                                        <li>Galbenus de ou</li>
                                        <li>Cordyvant: complex de polizaharide cu o proprietate exclusiva - IP6 (acid fitic)</li>
                                        <li>Extract de boabe de soia</li>
                                        <li>Cordyceps sinensis</li>
                                        <li>Beta-glucani</li>
                                        <li>Extract de Agaricus blazeii</li>
                                        <li>Extract de pulbere de Aloe Vera</li>
                                        <li>Frunze de maslin</li>
                                        <li>Ciupercile Maitake si Shiitake</li>
                                        <li>Pulbere de coaja de lamaie</li>
                                    </ul>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="card">

                        <div class="image">
                            <img src="/Assets/img/products/tri-factor.jpg">
                        </div>

                        <div class="content">
                            <div class="header">
                                4Life Transfer Factor
                            </div>
                        </div>

                        <div class="ui modal">

                            <i class="close icon"></i>
                            <div class="header">
                                4Life Transfer Factor
                            </div>

                            <div class="image content">
                                <div class="ui medium image">
                                    <img src="/Assets/img/products/tri-factor.jpg">
                                </div>
                                <div class="description">
                                    <div class="ui header">Ingrediente:</div>
                                    <ul>
                                        <li>Colostru bovin (300 mg in fiecare capsula)</li>
                                        <li>Galbenus de ou</li>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

            </div>

JS:

$('.card').click(function() {
    $(this).children('.ui.modal').modal({
        blurring: true
    }).modal('show');   
});

Answer 1

通过向模态 ('productx') 添加一个额外的类并向卡片添加相同的类找到了解决方法，其中 x 是产品编号。 HTML 和 JS 如下所示:

HTML:

                    <div class="card product2">

                        <div class="image">
                            <img src="/Assets/img/products/tri-factor.jpg">
                        </div>

                        <div class="content">
                            <div class="header">
                                4Life Transfer Factor
                            </div>
                        </div>

                        <div class="ui modal product2">

                            <i class="close icon"></i>
                            <div class="header">
                                4Life Transfer Factor
                            </div>

                            <div class="image content">
                                <div class="ui medium image">
                                    <img src="/Assets/img/products/tri-factor.jpg">
                                </div>
                                <div class="description">
                                    <div class="ui header">Ingrediente:</div>
                                    <ul>
                                        <li>Colostru bovin (300 mg in fiecare capsula)</li>
                                        <li>Galbenus de ou</li>
                                </div>
                            </div>

                        </div>

                    </div>

JS:

$('.card').click(function() {       
    $('.ui.modal.' + $(this).attr('class').split(' ')[1]).modal('show');
});

基本上，我找到了单击的“.card”产品类，并使用它打开在其 div 中具有相同类的模态，从而确保无论模态在 DOM 中的什么位置，每次都打开模态。