如何使用iframe在模态窗口中显示内容？

Question

I have a simple application here (QandATable2.php) where when the user clicks on the plus button, it will open a modal window and it displays the details which is stored in another page (previousquestions.php).

Now the problem I have is that if you straight away click on the "Search" button when the textbox is blank, you will see that it loads the page on its own page, displaying the details on that page. This is incorrect.

What I want it to do is that if the user has clicked on the search button, then I want the details to be stored within the modal window, not on its own whole page. I have heard that the best solution to use is by using an iframe. So does anyone know how this can be acheived using an iframe?

The modal window I am using is known as SimpleModal and it's website is here

Below is the QandATable2.php code where it displays the plus button and where it opens the modal window, linking the content of the modal window to the previousquestions.php page:

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

<h1>CREATING QUESTIONS AND ANSWERS</h1>
<table id="plus" align="center">
    <tr>
        <th>
            <a onclick="return plusbutton();">
                <img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
            </a>
            <span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
        </th>
    </tr>
</table>

Below is the previousquestions.php code, where it displays the details in the modal window and where the search feature is stored:

<?php
    foreach (array('questioncontent') as $varname) {
        $questioncontent = (isset($_POST[$varname])) ? $_POST[$varname] : '';
    }
?>

<div id="previouslink">
    <button type="button" id="close" onclick="return closewindow();">Close</button>
    <h1>PREVIOUS QUESTIONS</h1>

    <p>Search for a previous question by entering in a phrase in the search box below and submitting the phrase</p>

    <form action="previousquestions.php" method="post">
          <p>Search: <input type="text" name="questioncontent" value="<?php echo $questioncontent; ?>" /></p>
          <p><input id="searchquestion" name="searchQuestion" type="submit" value="Search" /></p>
    </form>
</div>

<?php 
    //...connected to DB
    if (isset($_POST['searchQuestion'])) {
        $questionquery = "SELECT QuestionContent FROM Question
              WHERE(QuestionContent = '".mysql_real_escape_string($questioncontent)."')";
        if (empty($questioncontent)){
            echo "Please enter in a phrase in the text box in able to search for a question";
        }
?>

Answer 1

Taken from the examples:

// Display an external page using an iframe
var src = "http://365.ericmmartin.com/";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
    closeHTML:"",
    containerCss:{
        backgroundColor:"#fff",
        borderColor:"#fff",
        height:450,
        padding:0,
        width:830
    },
    overlayClose:true
});

To suit your needs:

function plusbutton() {
    // Display an external page using an iframe
    var src = "previousquestions.php";
    $.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
        closeHTML:"",
        containerCss:{
            backgroundColor:"#fff",
            borderColor:"#fff",
            height:450,
            padding:0,
            width:830
        },
        overlayClose:true
    });
}

And let the form do its job as usual (no event handler here) or if that does not work, try adding target="_self" in the form's attributes, this ensures that the page opens inside the iframe.

Otherwise, instead of iframes, I would suggest using ajax and load them inside a normal div then, but it's up to you.

UPDATE: To answer your questions in the comments:

Problem 1: The modal box is set to 100% hieght and 50% width so I set the iframe to same, now width is perfect but hieght of iframe doesn't go down to 100%.

Try style="width:100%;height:100%;" instead of width="100%" height="100%" (I think it does not work to put percentage values in these attributes)

UPDATE 2: It seems the problem is not here, but with the .simplemodel-data class that contains the iframe, a "hacky" solution is to add to your css: .somplemodel-data {height: 100%;}. Check the docs to see if there is something "official" about that.

Problem 2: I have a close button where if the user clicks on the "close" button, it closes the modal window, but now it doesn't close the modal window, it keeps stating it is undefined.

The close button will not work, because the closewindow function is defined in the parent window while you are calling it from inside the iframe. To overcome this you have 2 solutions: 1. either you put the close button outside the iframe and keep the rest as it is 2. or you call the parent window's closewindow function.

For 1: $.modal('<button type="button" id="close" onclick="return closewindow();">Close</button><iframe src="' + src + '" style="border:0;width:100%;height:100%;">'); in "QandATable.php"

For 2: <button type="button" id="close" onclick="return parent.closewindow();">Close</button> in "previousquestions.php" (or maybe replace parent by top, I think it's the same)