如何用這個jquery函數關閉模態窗口？

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），但單擊“添加”按鈕時仍然沒有關閉模態窗口：

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

?> 

Answer 1

根據我記得的評論，你想在點擊modal右邊的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函數並丟棄.add按鈕的.on綁定。 :)