Popup Generated Not responding

[Damini Gardi]

Hello all,
I am new to jquery. I am trying to bring a popup dynamically which contains an MCQ type question. The problem is when the game is being paused in the background along with it the popup is also paused and the selection of the options cannot be made, only the submit and continue button in the popup are working.

please help!!

index.html

<div id="popup" class="modal-box">
            <header>
                <!-- a href="#" class="js-modal-close close">×</a -->
                <h2>Which of the following are not parts of trees?</h2>
            </header>

            <div class="modal-body">
                <input type="radio" name="fan" value="fan" id="r1"> Fan<br>
                <input type="radio" name="fan" value="roots" id="r2"> Roots<br>
                <input type="radio" name="fan" value="stem" id="r3"> Stem<br>
                <input type="radio" name="fan" value="flower" id="r4"> Flower <br>
                <div>
                    <p class="greeting-id">The ID is </p>
                    <p class="greeting-content">The content is </p>
                </div>
                <!--Correct or Wrong Answer-->
                <div class="correct-answer" id="ca">
                    <p>Correct Answer!</p>
                </div>
                <div class="wrong-answer" id="wa">
                    <p>Wrong Answer!</p>
                </div>
            </div>
       
            <footer>
                <!-- <a href="#" class="js-modal-close">Close Button</a> -->
                <input type="submit" value="Submit" id="results" name="submit" onclick="submitValidate()">
                <input type="submit" value="Continue" id="con" name="continue" onclick="handleContinue()">
            </footer>
        </div>

the logic for the popup to work

function openPopup()
    {
        var pop = document.getElementById("popup");
        pop.style.display = "block";
        pause();
       
    }   

    function submitValidate()
        {
            var selectedVal = "";
            selected = $("input[type='radio'][name='fan']:checked");
                    if (selected.length > 0)
                    {
                        selectedVal = selected.val();
                    }
                    console.log (selectedVal);
                    var class1 = document.getElementById("ca");
                    var class2 = document.getElementById("wa");
                    if (selectedVal == 'fan')
                    {
                        console.log(class1.style.display);
                        class1.style.display = "block";
                        console.log(class2.style.display);
                        class2.style.display = "none";
                    }
                    else
                    {
                        console.log(class1.style.display);
                        class1.style.display = "none";
                        console.log(class2.style.display);
                        class2.style.display = "block";
                               
                    }
        }
       
        function handleContinue()
        {
            var pop = document.getElementById("popup");
            pop.style.display = "none";
        }

css file

.modal-box {
  display: none;
  position: absolute;
  z-index: 1000;
  width: 98%;
  background: white;
  border-bottom: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
}

.modal-box header,
.modal-box .modal-header {
  padding: 1.25em 1.5em;
  border-bottom: 1px solid #ddd;
}

.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 { margin: 0; }

.modal-box .modal-body { padding: 2em 1.5em; }

.modal-box footer,
.modal-box .modal-footer {
  padding: 1em;
  border-top: 1px solid #ddd;
  background: rgba(0, 0, 0, 0.02);
  text-align: right;
}

.modal-overlay {
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3) !important;
}

a.close {
  line-height: 1;
  font-size: 1.5em;
  position: absolute;
  top: 5%;
  right: 2%;
  text-decoration: none;
  color: #bbb;
}

a.close:hover {
  color: #222;
  -webkit-transition: color 1s ease;
  -moz-transition: color 1s ease;
  transition: color 1s ease;
}

.correct-answer {
    display: none;
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
.wrong-answer {
    display: none;
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.button {
    background-color: #e7e7e7;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    cursor: pointer;
}
.disabled {
    .disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
}

@media (min-width: 32em) {
  .modal-box { width: 70%; }
}