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

上記のコードはモーダルウィンドウを閉じませんが、これはなぜですか？ちなみに、これらのコードは両方とも同じページにあります。

ericmartinが開発した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がロードされる前にコードが実行されないように、要素を表示/非表示にし、関数を内にラップする順序に注意してください。

私のフィドルと同じように機能するようにページを調整できない場合は、プラグインが正しく機能しない（または別のモーダルプラグインに切り替える）原因がある可能性があるため、ページのコードからさらに投稿する必要があります。

編集：を使用しているため、のスコープから親ウィンドウの定義済み関数に直接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 に答える