Question

我一直试图找出为什么我的模态在关闭之后不再出现。如果我想再次从模态中看到信息，我每次都要刷新页面。

当我第一次加载页面并点击第一张卡片时，它会显示模态，但是无论我点击第一张卡片多少次它都不再加载模态因为它将其从哪里移除我设置它并将其移动到具有以下类别的div＆＃34; ui dimmer modals页面转换可见活动＆＃34;。知道如何保持我的模态在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

通过向模式（＆＃39; productx＆＃39;）添加一个额外的类并将相同的类添加到卡中找到解决方法，其中x是产品编号。 HTML＆amp; 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');
});

基本上我找到了点击的＆＃39; .card＆＃39; product class并使用它来打开在其div中具有相同类的模态，从而确保每次无论DOM在何处都打开模态。

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

1 个答案: