modal window doesn't close

Question

I have two functions in my php script which is placed in the QandA2Table.php but their buttons are placed in the previousquestions.php page as the modal window displays details from that page.

Anyway I have two buttons below which is a "Close" button and "Add" button:

<div id="previouslink">
<button type="button" id="close" onclick="return parent.closewindow();">Close</button>

</div>

<?php 

      $output = "";

        while ($questionrow = mysql_fetch_assoc($questionresult)) {
$output .= "
<table>
      <tr>
      <td id='addtd'><button type='button' class='add'>Add</button></td>
      </tr>";
        }
        $output .= "        </table>";

        echo $output;

  }

}

?>  

The problem I have is closing the modal window. When I click on the "Close" button, it closes the modal window which is great, but if I click on an "Add" button, then it doesn't close the modal window. Why is this?

Below is the two button functions:

function closewindow() {     

    $.modal.close(); 
    return false;
} 

         $(".add").on("click", function(event) {
        console.log("clicked");

        var theQuestion = $("td:first-child", $(this).parent()).text();

        if ($('.activePlusRow').length > 0) {
            $('.activePlusRow').next('.textAreaQuestion').val(theQuestion);
        }
        parent.closewindow();
        return true;
    });

Below is iframe:

function plusbutton() { 
    // Display an external page using an iframe 
    var src = "previousquestions.php"; 
    $.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
    return false;
}

Answer 1

If i did not get you wrong. Reason and the solution is simple

your modal container page -which you create iframe in it- has these functions right?

closewindow() and function plusbutton()

beside them also you have

$(".add").on("click", function(event) {
    ...............

part -event catcher- in the main html if i understand right ?

So you can't expect $(".add").on("click", function(event) .... to be triggered by a button inside the iframe.

What you can simply do is converting $(".add").on("click", function(event) to a function

chage that

$(".add").on("click", function(event) {
    console.log("clicked");

    var theQuestion = $("td:first-child", $(this).parent()).text();

    if ($('.activePlusRow').length > 0) {
        $('.activePlusRow').next('.textAreaQuestion').val(theQuestion);
    }
    parent.closewindow();
    return true;
});

to

function add_function {
    console.log("clicked");

//change this part to fit your content hierachy by adding frame id refferences. // i dont know that data you will parse in td:first-childs parent. var theQuestion = document.frames["the_frame"].$("td:first-child", $(this).parent()).text();

    if ($('.activePlusRow').length > 0) {
        $('.activePlusRow').next('.textAreaQuestion').val(theQuestion);
    }
    parent.closewindow();
    return true;
}

and change this line in iframe content

<td id='addtd'><button type='button' class='add'>Add</button></td>

to

<td id='addtd'><button type='button' class='add' onclick="parent.add_function();" >Add</button></td>

and add an id to the iframe creator line at plusbutton function

 $.modal('<iframe if="the_frame" src="' + src + '" style="border:0;width:100%;height:100%;">');