如何正确关闭此 JQuery 对话框？答案

【问题标题】：How can I correctly close this JQuery dialog?如何正确关闭此 JQuery 对话框？
【发布时间】：2015-05-29 10:38:39
【问题描述】：

我是 JavaScript 和 JQuery 的新手，但遇到以下问题。

进入页面我有这个对话框：

<div id="dialogReject" title="">
    <table style="visibility: hidden;" id="rifiutaTable" border="0" class="standard-table-cls" style="width: 100%!important">
        <tbody style="background-color: #ffffff;">
            <tr>
                <td style="font: 16px Verdana,Geneva,Arial,Helvetica,sans-serif !important">Inserire note di rifiuto</td>
            </tr>
            <tr>
                <td>
                    <textarea style="visibility: hidden;" rows="5" cols="70" id="myRejectNote"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <input class="bottone" readonly="readonly" type="text" value="Rifiuta" onclick="rifiuta()"/>
                </td>
            </tr>
        </tbody>
    </table>
</div>

我认为是由这个 JQuery 脚本创建的：

$(document).ready(function() {
    larghezza = '950px';
    lunghezza = '470px';
    lunghezza2 = '530px';
    $("#dialogReject").dialog({
         autoOpen: false,
         //width:'335px',
         width:'600px',
         modal: true,
         show: {        
             effect: "blind",
             duration: 500      
         },
         hide: { 
             effect: "blind",   
             duration: 500    
         }
     });
});

如您所见，此对话框包含由 2 个输入标记实现的 2 个按钮，这些按钮：

<td style="text-align: right">
    <input class="bottone" readonly="readonly" type="text" value="Annulla" onclick="javascript:window.close()"/>

    <input class="bottone" readonly="readonly" type="text" value="Rifiuta" onclick="rifiuta()"/>
</td>

当用户点击 Annulla 按钮时，我希望对话框关闭。

其实我尝试过使用window.close()函数，但它不起作用。

我认为要关闭此对话框，我必须使用与用户使用 ESC 键盘按钮以简单动画关闭对话框时执行的事件相同的事件。

但我真的不知道该怎么做。你能帮我做吗？

Tnx

【问题讨论】：

我想你想要 .dialog("close");有关示例代码，请参阅“按钮”和“隐藏”部分下的 jQuery 对话框文档。 jQuery Dialog

标签： javascript jquery html dialog jquery-dialog

【解决方案1】：

试试$("#dialogReject").dialog( "close" );

欲了解更多信息，请阅读https://api.jqueryui.com/dialog/

要绑定它，改变

<input class="bottone" readonly="readonly" type="text" value="Annulla" onclick="javascript:window.close()"/>

到

<input id="closeDialog" class="bottone" readonly="readonly" type="text" value="Annulla"/>

并在后面添加：$("#dialogReject").dialog({ [..your code..] });

$("#closeDialog").click(function(){
    $("#dialogReject").dialog( "close" );
})

【讨论】：

嗯，我该把它放在哪里？

【解决方案2】：

你必须在你的 javascript 文件中监听一个事件。

首先为您的关闭按钮设置一个 ID，我在这里使用#closeButton：

$(document).ready(function() {
    larghezza = '950px';
        lunghezza = '470px';
        lunghezza2 = '530px';
    $("#dialogReject").dialog({
                autoOpen: false,
                //width:'335px',
                width:'600px',
                modal: true,
                show: {        effect: "blind",        duration: 500      },
                hide: {        effect: "blind",        duration: 500      }

     });

    $("#closeButton").click(function(){
        $("#dialogReject").close();
    });

});

【讨论】：

【解决方案3】：

正如 Alex 和 kaz 给出的答案 $("#dialogReject").close();

或者你也可以使用可以通过jquery创建的按钮

  buttons: {Rifiuta: funstion()
            {
            rifiuta()
            },
              Annulla: function() {
          $( this ).dialog( "close" );
        }

供参考： https://jqueryui.com/dialog/#modal-confirmation

    $( "#dialogReject" ).dialog({
 autoOpen: open,
            //width:'335px',
            width:'600px',
            modal: true,
            show: {        effect: "blind",        duration: 500      },
            hide: {        effect: "blind",        duration: 500      },
  buttons: {Rifiuta: funstion()
            {
            rifiuta()
            },
          Annulla: function() {
      $( this ).dialog( "close" );
    }
  }
});

【讨论】：