為什么以下代碼的彈出窗口中沒有顯示“確定”按鈕？

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”。在這方面您能幫我嗎？ 我還附加了彈出窗口的屏幕截圖。 請查看一下，以更好地了解我的問題。 在此處輸入圖片說明

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 個解決方案

解決方案1
1 2013-12-06 06:06:14

解決方案2
0 2013-12-06 06:52:43

為什么以下代碼的彈出窗口中沒有顯示“確定”按鈕？

問題描述

2 個解決方案

解決方案1 1 2013-12-06 06:06:14

解決方案2 0 2013-12-06 06:52:43

解決方案1
1 2013-12-06 06:06:14

解決方案2
0 2013-12-06 06:52:43