Luke Luke - 20 days ago 6
Javascript Question

PopUp is consistently showing everytime the checkbox is clicked

Functionality

A POPUP image with text will be displayed when user clicks the checkbox and the POPUP image will fadeOut when user clicks the cancel button, the checkbox will still be checked.

Issue

When I uncheck, the POPUP image with text gets displayed.

Correct behaviour

1.) User checks the checkbox, a POPUP image with text should be displayed. When User clicks on the close button, the POPUP should fadeOut.

2.) The checkbox should still be checked.

3.) When user uncheck the checkbox, the POPUP image with text should not fadeIN.

Current behaviour

1.) User checks the checkbox, a POPUP image with text gets displayed. When User clicks on the close button, the POPUP fades Out.

2.) The checkbox will still be checked.

3.) When user uncheck the checkbox, the POPUP image with text gets displayed.

Code:



function Minimise() {

idleTime = 0;


$('#POPUP_PDPA').fadeOut();
}

$('#AcknowledgeField').click(function() {


$('#POPUP_PDPA').fadeIn();
});

<input type="checkbox" id="AcknowledgeField" style="z-index=4; position:absolute; top:695px; left:227px; height:45px; width:45px; outline=0; border: 0; background: transparent;">


<div id="POPUP_PDPA" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=99; top:0px; margin:auto;">

<img id="main_PopUp" src="lib/image/PopUp.png" style="position:absolute; top:750px; left:57px; z-index:80; margin:auto;" />

<div id="PDPA" class="ContainerPDPAText">
<div id="Scrolling" class="PDPAinnerScroll">
<p><font face="HelveticaNeueLTStd" color="blue">1.) I email ...</font>
</p>
<p><font face="HelveticaNeueLTStd" color="blue">2.) By submitting this form, I agree to ....</font>
</p>
</div>
</div>
<button class="MinimiseButton" onclick="Minimise()"></button>
</div>




Answer

You could add a variable say 'clicked' and set it true or false depending on a statement. For example:

var clicked = false
$('input:checkbox').on('click', function() {
if(!clicked) {
  clicked = true
} else {
  clicked = false
  console.log('I have been clicked! Now on my next click I shall be set to false and so on')
}