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）但是在点击＆＃34;添加＆＃34;时仍然没有关闭模态窗口。按钮：

 $(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脚本中）。这包括＆＃34;添加＆＃34;和＆＃34;关闭＆＃34;按钮：

<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

根据我记得的评论，你想点击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函数并丢弃.on按钮的.add绑定。：）

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

1 个答案: