3

下面是我拥有的关闭模式窗口的 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" 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 脚本中）。这包括“添加”和“关闭”按钮：

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

?>
4

1 回答 1

3

根据我从评论中的记忆，您想在单击右侧add按钮时关闭模式modal？

 $(document).ready(function(){
      $('.add').on('click', function(){ 
           $.modal.close();
      });
 });

我做了你的第一个例子（在你的问题编辑之前）工作，看看这个JSFiddle。

请注意显示/隐藏元素的顺序并将函数包装$(document).ready()在 DOM 中以防止在加载 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。

编辑

现在有了完整的代码，很容易找到解决方案，只需在 PHP 中添加按钮即可onclick='parent.closewindow();'：add

<td id='addtd'><button type='button' class='add' onclick='parent.closewindow();'>Add</button></td>

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

于 2012-05-31T01:23:06.167 回答