如何用这个jquery函数关闭模态窗口？

Question

下面是关闭模态窗口的Html按钮和javascript函数：

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

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

现在上面的代码确实关闭了模态窗口，这很好。

但我想知道如何使用下面的函数和html按钮编写代码：

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



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

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

上面的代码没有关闭模态窗口，为什么会这样？ 顺便说一下，这两个代码都在同一页面上。

我正在使用eric martin开发的simplemodal

更新：

下面是完整代码（QandATable2.php），但单击“添加”按钮时仍然没有关闭模态窗口：

 $(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>

下面是完整代码，显示进入模态窗口的所有信息（这是在previousquestions.php脚本中）。 这包括“添加”和“关闭”按钮：

<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

根据我记得的评论，你想在点击modal右边的add按钮时关闭模modal ？

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

我做了你的第一个例子（在你的问题编辑之前）工作，看看这个JSFiddle 。

请小心显示/隐藏元素的顺序，并将函数包装在$(document).ready()以防止在加载DOM之前执行代码。

如果你没有设法使你的页面适应我的小提琴，你应该从你的页面代码发布更多，因为可能会有一些东西导致插件无法正常工作（或切换到另一个模态插件）。

编辑：您正在使用iframe ，这就是您无法直接从iframe的范围访问父窗口定义的函数的原因。 您可以尝试使用window.opener访问父窗口的作用域函数，或者，以解决所有和任何窗口范围问题：

更换

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

同

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

这将通过Ajax动态地将内容加载到div，这是一种更好的方法，可以解决您遇到的任何窗口范围问题。

或者切换到支持直接向其加载页面的模态插件，例如colorbox 。

编辑

现在有了完整的代码，很容易找到解决方案，只需添加onclick='parent.closewindow();' 到PHP中的add按钮：

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

这样，它将重用现有的closewindow函数并丢弃.add按钮的.on绑定。 :)