Как заново открыть семантический интерфейс мод? - PullRequest
Новая
       11

Как заново открыть семантический интерфейс мод?

0 голосов
/ 16 мая 2018

Я пытался понять, почему мои модалы больше не будут появляться после того, как я их закрою.Мне нужно каждый раз обновлять страницу, если я хочу снова увидеть информацию из модалов.

Когда я впервые загружаю страницу и нажимаю на первую карточку, она покажет мне модал, но тогда неважно какМного раз я щелкаю по первой карточке, она больше не будет загружать модал, потому что она удаляет его из того места, где я его установил, и перемещает его в div со следующими классами: «UI DIMMER MODAL Страница перехода видима активна».Любая идея, как я могу сохранить мои модалы, где они были в 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');   
});

1 Ответ

0 голосов
/ 17 мая 2018

Нашли обходной путь, добавив один дополнительный класс к модальному ('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.

...