为什么 OK 按钮没有显示在以下代码的弹出窗口中？答案

【问题标题】：Why the OK button is not getting displayed in a pop-up in following code?为什么 OK 按钮没有显示在以下代码的弹出窗口中？
【发布时间】：2013-12-06 14:52:43
【问题描述】：

我的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link href="http://localhost/abc/pqr/web/css_new/style.css" rel="stylesheet" type="text/css" />
    <link href="http://localhost/abc/pqr/web/css_new/scroll.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://localhost/abc/pqr/web/css/jquery_ui/ui.all.css" type="text/css" />

    <script type="text/javascript" src="http://localhost/abc/pqr/web/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://localhost/abc/pqr/web/js/jquery_ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://localhost/abc/pqr/web/js/jquery_ui/ui.dialog.js"></script>

    <script>
      var timer;
      var keys = {};

      $(document).ready(function () {
        $(document).mouseleave(function () {
          customAlert("Your mouse is away");
        });
      });

      $(document).keydown(function (e) {
        keys[e.which] = true;
      });

      $(document).keyup(function (e) {
        delete keys[e.which];
      });

      if( (keys[91] && keys[68]) || (keys[18] && keys[9]) || (keys[17] && keys[91] && keys[68]) ) { 
        customAlert("Your mouse is away");
      }

      function customAlert(customText) {
        $("#popUp").html(customText);
        timer = setInterval(customAlert2, 5000);

        $("#popUp").dialog({
          dialogClass: "no-close",
          buttons: [{
                      text: "OK", click: function () {
                        $(this).dialog("close");
                        clearInterval(timer);
                      }
                    }]
        });
      }

      function customAlert2() {
        location.reload();
        $("#popUp2").dialog({
        dialogClass: "no-close",
        buttons: [{
                  text: "OK", click: function () {
                    $(this).dialog("close");
                  }
                }]
        });
      }      
    </script>
  </head>
  <body>
    <h1>My first PHP program</h1>
    <p>Hello World!</p>
    <div id="popUp" title="First alert message"></div>
    <div id="popUp2" title="Second alert message">Time is over</div>
  </body>
</html>

当显示弹出窗口时，确定按钮丢失。它只显示'O'。你能在这方面帮助我吗？我还附上了弹出窗口的屏幕截图。请查看它以更好地了解我的问题。

【问题讨论】：

您的第一个 PHP 程序中没有 PHP！哈哈。 :)

标签： javascript jquery jquery-ui jquery-ui-dialog alert

【解决方案1】：

jQuery UI 文档描述了定义按钮的不同方法。

来自官方文档的示例：

$( "#dialog-confirm" ).dialog({
  resizable: false,
  height:140,
  modal: true,
  buttons: {
    "Delete all items": function() {
      $( this ).dialog( "close" );
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  }
});

http://jqueryui.com/dialog/#modal-confirmation

所以，在你的情况下，它应该是这样的：

$("#popUp").dialog({
      dialogClass: "no-close",
      buttons: {
          "OK": function () {
              $(this).dialog("close");
              clearInterval(timer);
          }
      }
});

$("#popUp2").dialog({
      dialogClass: "no-close",
      buttons: {
          "OK": function () {
              $(this).dialog("close");
          }
      }
});

【讨论】：

非常感谢马里斯的帮助。但是我对上面的代码有疑问。我无法像以前那样在 Ok 按钮上触发 Click 事件。您尚未在 Ok 按钮上定义单击事件。这个东西怎么实现？
@PHPLover 在按钮名称之后的匿名函数是在单击时执行的函数。您应该在 jsfiddle.net 上重新创建您的问题，以便我们测试您的代码并帮助修复它。

【解决方案2】：

我已经在 JS fiddle 上尝试了您的代码，并使用您在那边提供的自定义警报调用了您的 mouseleave 函数，并且它工作正常，即当我离开输出窗口时，它向我显示带有“确定”按钮的对话框。

请找到这个链接并写下你的第二个特效，也许我们可以在那里找到一些东西。

请在下面找到 jsFiddle。

http://jsfiddle.net/LtQnT/352/

$(document).mouseleave(function () {
           //$( "#popUp" ).dialog( "open" );  
          customAlert('Hi');
        });

【讨论】：