I've been trying to figure out why my modals won't show up anymore after I close them. I have to refresh the page every time if I want to see the info from the modals again.
When I first load the page and click on the first card it will show me the modal, but then no matter how many times I click the first card it won't load the modal anymore because it removes it from where I set it and moves it to a div with the following classes "ui dimmer modals page transition visible active". Any idea how I can keep my modals where they were in the DOM?
Below is my code:
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');
});
Found a workaround by adding one extra class to the modal ('productx') and the same class to the card, where x is the product number. the HTML & JS for this looks as follows:
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');
});
Basically I'm finding the clicked '.card' product class and using that to open the modal that has the same class in it's div, thus ensuring that the modal is opened every time no matter where it is in the DOM.