Question

我的代码如下：

<!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'。你可以在这方面帮助我吗？我还附上了弹出窗口的屏幕截图。请查看它以更好地了解我的问题。 enter image description here

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

Answer 2

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

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

请在下面找到jsFiddle。

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

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

为什么以下代码中的弹出窗口中没有显示“确定”按钮？

2 个答案: