如何使用此 jquery 函数关闭模式窗口？

Posted 2023-05-07

【中文标题】如何使用此 jquery 函数关闭模式窗口？

【英文标题】：How to close modal window with this jquery function?

【发布时间】：2012-06-05 06:24:47

【问题描述】：

下面是我拥有的 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"    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;

?> 

【问题讨论】：

您确定在$(document).ready() 部分中编写了点击函数事件处理程序代码吗？

.on 与事件委托一起使用，因此即使在 DOM 准备好之前执行也不会有问题（唯一的问题是在加载 modal 插件之前单击按钮，这将在控制台中返回未定义的函数错误）。

模态窗口确实打开了，并且“添加”按钮存储在模态窗口中，但是当我点击“添加”按钮时，它并没有关闭模态窗口，

如果您使用的是旧版本的 jQuery，请尝试使用 .live 而不是 .on。

告诉我们您正在使用哪个modal 插件，以及您在 JS 控制台中是否有任何错误。

【参考方案1】：

根据我对 cme​​ts 的记忆，您想在单击 modal 内的 add 按钮时关闭模式，对吧？

 $(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 绑定。 :)

【讨论】：

我已经尝试过你的代码，但它仍然没有工作。我在我的问题中包含了一个更新，它显示了整个代码，这样你就可以看到它的样子，看看你是否可以通过查看整个代码来理解它，并希望能够获得“添加”按钮来关闭模式窗口

哦，您使用的是iframe，这就是您无法访问父窗口范围中定义的功能的原因。试试window.opener.$.modal.close();。不确定是否必须在加载的 iframe 中定义 .on 事件，我会测试一下。

好吧，我编辑了我的答案，将 iframe 替换为带有 ajax 的模态 div，这应该可以解决任何窗口范围问题。试一试。 :)（如果您添加了 window.opener，请删除它）

我试了一下，但问题是我需要一个 iframe，没有 iframe 那么这意味着每当我在模式窗口中搜索某些内容时，它都会在单独的页面上显示详细信息没有 iframe 而有 iframe 它在模态窗口中显示它

哦，我明白你的意思了。尝试调用window.opener 然后，我将对其进行测试以检查范围。