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

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

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

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

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

<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

我正在使用eric martin开发的simplemodal

UPDATE:

更新：

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

下面是完整代码（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>

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:

下面是完整代码，显示进入模态窗口的所有信息（这在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;

?>

1 个解决方案

#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.

我做了你的第一个例子（在你的问题编辑之前）工作，看看这个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.

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

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:

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

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.

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

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

或者切换到支持直接向其加载页面的模态插件，例如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:

现在有了完整的代码，很容易找到解决方案，只需添加onclick ='parent.closewindow（）;'到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. :)

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

#1