In my project, I wanted to create a functionality where clicking on an image would trigger a modal box to pop up with additional content added once. However, I encountered two issues that I'm currently facing. Firstly, the header text that I intended to append does not seem to be appending to the header element as expected. Secondly, every time I click on the laptop image, the same paragraph keeps getting appended to the modal box repeatedly.
Below is a snippet of the HTML and JavaScript code I used:
<!--Trigger Image -->
<img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/02-512.png" id="laptop" class="openmodal">
<!--Modal Box -->
<div class="question" id="question-modal">
<header id="modal-header">
<a href="#" class="close">X</a>
</header>
<div class="answer">
</div>
</div>
The JavaScript part included a script to open and close the modal box when clicking the image or the close button:
var id = this.id;
//Open the modal box
$('.openmodal').on('click', function() {
$('#question-modal').modal('show');
if (id == 'laptop')
$('header').append('<h3>FAQs on laptops</h3>');
$('.answer').append("Mac > any PC");
});
//close modal box
$('.close').on('click', function() {
$('#question-modal').modal('hide');
});
If you need further clarification or details, feel free to check out my JSFiddle here.
I've been struggling to find a solution for temporarily removing the paragraph when closing the box. I attempted using .remove(), but it ended up completely removing the paragraph every time the laptop is clicked. The use of .detach() didn't work out as expected either.