Javascript 如何使用按钮单击关闭模态窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10706100/
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 a modal window using a button click
提问by user1394925
I have a modal window but I want to set up a close function so that when the user clicks on the "button", it will close the modal window. Does anyone know how this can be achieved?
我有一个模态窗口，但我想设置一个关闭功能，以便当用户单击“按钮”时，它将关闭模态窗口。有谁知道这是如何实现的？
I have a link to the application so you can view it here
我有该应用程序的链接，因此您可以在此处查看
Below is the javascript code where it shows the function of opening the modal window and the setup function of where I want to place the code to close the modal window:
下面是javascript代码，它显示了打开模态窗口的功能以及我想放置代码以关闭模态窗口的位置的设置功能：
function plusbutton() {
$(".previouslink").modal();
return false;
}
function closewindow() {
return false;
}
Below is the form code where user clicks on the plus button and it displays the content within the "previouslink" div tag:
以下是用户单击加号按钮并显示“previouslink”div 标签中的内容的表单代码：
<form id="QandA" action="imageupload.php" method="post">
<h1>CREATING QUESTIONS AND ANSWERS</h1>
<table id="plus" align="center">
<tr>
<th><a onclick="return plusbutton();">
<image 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>
<div class="previouslink">
<h1>PREVIOUS QUESTIONS</h1>
<button type="button" id="close" onclick="return closewindow();">Close
</button></div>
</form>
回答by Lukx
Your Live-Example shows me, that you seem to be using SimpleModal
您的 Live-Example 向我展示了您似乎在使用SimpleModal
From the documentation:
从文档：
CLOSING THE DIALOG
SimpleModal will automatically bind the close function (using the onclick event) to any element inside the dialog with the
simplemodal-closeclass. In addition, you can programmatically close the currently opened dialog by calling$.modal.close();
关闭对话框
SimpleModal 将自动将 close 函数（使用 onclick 事件）绑定到具有
simplemodal-close该类的对话框内的任何元素。此外，您可以通过调用以编程方式关闭当前打开的对话框$.modal.close();
Means: In your closeWindow()-Function, you could simply enter the line:
意思是：在您的closeWindow()-Function 中，您可以简单地输入以下行：
$.modal.close();
and be done.
并完成。
回答by adamdehaven
I've used this jQuery reveal modal pluginon several sites and it has worked great for me.
我已经在几个站点上使用了这个jQuery 显示模式插件，它对我很有用。
Alternatively, you should check out jQuery Impromptu. I love the tour feature myself, but the modals are more likely what you are trying to accomplish.
或者，您应该查看jQuery Impromptu。我自己喜欢游览功能，但模态更有可能是您想要完成的。
The code from both examples will probably lead you to what you are specifically looking for :)
这两个示例中的代码可能会引导您找到您特别需要的内容:)
