I've set up a modal box called sectors with two subcategories: publication and food.
Each subcategory is linked to a div that contains an image.
My goal is to hide the image inside the modal box and display it on the screen once the box is closed.
I attempted using display:none within the div but it didn't resolve the issue.
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').addClass('hideme');
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function() {
var elemContent = $("#" + $(this).data('target')).html();
if ($(this).prop("checked")) {
//$("#" + $(this).data('target')).removeClass('hideme');
content += elemContent;
} else {
//$("#" + $(this).data('target')).addClass('hideme');
content = content.replace(elemContent, '');
}
$("#" + $(this).data('target')).toggleClass('hideme');
});
$('[rel="modal:close"]').on('click', () => {
$('.btn').siblings().first().html('').append(content);
content= '';
}).onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: blue
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
input:focus {
outline: none;
}
.hideme {
display: none;
}
.spaz {
color: blue;
margin-left: 40%;
}<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<p> <a class="btn" href="#ex5">Sectors </a> <span class="spaz"></span> </p>
<div id="ex5" ; class="modal" ; style="background-color:white">
<div style="float:left;">
<p>
<input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked">
<label for="group1" class="onlyThese">Publication </label>
</p>
<div id="myDiv">
<img src="https://tse4.mm.bing.net/th?id=OIP.qKsWIt_Qae6vtWd3-RulIQHaHa&pid=Api&P=0&w=300&h=300.jpg"> </div>
<p>
<input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked">
<label for="group2" class="onlyThese">Food </label>
</p>
<div id="myDivs">
<img src="https://tse3.mm.bing.net/th?id=OIP.HcL9FITSR_SWsLMgMFMkYAHaEo&pid=Api&P=0&w=281&h=176.jpg"> </div>
</div>
<div>
<div>
<p style="float:right">
<a href="#" rel="modal:close" ; class="onlyThese;"> <b>Apply</b> </a>
</p>
</div>
</div>The desired outcome is as follows:
- Users open the modal box named sectors
- They select a subcategory, e.g., publication
- The content of the subcategory is loaded/fetched from the
divbut remains hidden inside the modal box - When the user clicks Apply, the modal box closes and the content is displayed