Javascript 如何使用此 jquery 函数关闭模态窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10826094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to close modal window with this jquery function?
提问by user1394925
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;
?>
采纳答案by Fabrício Matté
From what I remember from the comments, you wanted to close the modal when clicking in an addbutton inside the modalright?
根据我从评论中记得的内容，您想在单击右侧的add按钮时关闭模态modal？
$(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.openerto 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 addbutton in your PHP:
现在有了您的完整代码，很容易找到解决方案，只需将其添加onclick='parent.closewindow();'到addPHP 中的按钮即可：
<td id='addtd'><button type='button' class='add' onclick='parent.closewindow();'>Add</button></td>
This way, it'll re-use the existing closewindowfunction and discard the .onbinding for the .addbuttons. :)
这样，它将重用现有closewindow功能并丢弃按钮的.on绑定.add。:)
