gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 20:30:37 26 4
gpt4 key购买 nike

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

当我第一次加载页面并点击第一张卡片时,它会显示模态,但是无论我点击第一张卡片多少次,它都不会再加载模态,因为它将它从我设置的位置移除它并将其移动到具有以下类“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');
});

最佳答案

通过向模态 ('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 中的什么位置,每次都打开模态。

关于javascript - 如何重新打开语义 ui 模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50374536/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com