Question

Below is the Html button and javascript function I have which closes a modal window:

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

function closewindow() {     
    $.modal.close(); 
    return false;
} 

Now the code above does close the modal window which is fine.

But I want to know how to write the code by using this function and html button below:

<button type='button' class='add'>Add</button>



  $(document).on('click', '.add', function(){ 

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

The above code does not close the modal window, why is this? Both these codes are on the same page by the way.

I am using simplemodal developed by eric martin

UPDATE:

Below is full code (QandATable2.php) but it is still not closing modal window when clicking on “Add” button:

 $(document).ready(function(){
      $('.add').on('click', function(){ 
//close modal window when user clicks on "Add" button (not working)
           $.modal.close();
      });
 });

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

//Opens modal window and displays an iframe which contains content from another php script
    return false;
} 


function closewindow() {     

    $.modal.close(); 
    return false;
//closes modal window when user clicks on "Close" button and this works fines
} 

...HTML

    <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" name="plusbuttonrow"/>
    </a>
    <span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
    </th>
    </tr>
    </table>

Below is the full code which displays all of the information that goes into the modal window (this is in previousquestions.php script). This includes both “Add” and “Close” buttons:

<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;

?> 

Answer 1

From what I remember from the comments, you wanted to close the modal when clicking in an add button inside the modal right?

 $(document).ready(function(){
      $('.add').on('click', function(){ 
           $.modal.close();
      });
 });

​
I made your first example (before your question edit) work, take a look at this JSFiddle.

Be careful with the order you show/hide elements and wrap your function inside the $(document).ready() to prevent the code execution before the DOM is loaded.

If you don’t manage to adapt your page to work similarly to my fiddle, you should post more from your page’s code as there’d probably be something causing the plugin to don’t work properly (or switch to another modal plugin).

edit: You’re using an iframe, that’s why you can’t access the parent window’s defined functions from the iframe‘s scope directly. You could try using the window.opener to access your parent window’s scoped functions, or, to solve all and any window scope problem:

Replace

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

With

$.modal('<div id="modal" style="border:0;width:100%;height:100%;">');
$('#modal').load(src);

This will load content to the div dynamically through Ajax, which is a better approach and resolves any window scope problems which you were facing.

Either that or switch to a modal plugin which supports loading pages directly to it, for instance, colorbox.

EDIT

Now with your full code it was easy to find a solution, simply add onclick='parent.closewindow();' to your add button in your PHP:

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

This way, it’ll re-use the existing closewindow function and discard the .on binding for the .add buttons. 🙂