Question

我将jquery对话框附加到主体。我正在设置对话框的高度。

// Create timeout warning dialog
       $('body').append('<div id="sessionTimeout-dialog" title="' 
                        + opts.title 
                        + '"><p>' 
                        + opts.message 
                        + '</p><span id="sessionTimeout-timer"></span>&nbsp;seconds.</div>');

       $('#sessionTimeout-dialog').dialog({
            autoOpen: false,
            resizable: false,
            minWidth: 0,
            width: 300,
            minHeight: 0,
            height: 400,
            modal: true,
            closeOnEscape: false,
            open: function () {
                //removes the right top close(X) button from the dialog
                $(".ui-dialog-titlebar-close").hide();
                //$(this).dialog('option', 'maxHeight', 500);
            },
            buttons: {
                // Logout button, closes the dialog and takes user to logout URL
                "Log Out Now": function () {
                    $(this).dialog('close');
                    //window.location = 'home.php';
                    window.location = ''+opts.logoutUrl;
                },
                // Stay button, closes dialog
                "Stay Connected": function () {
                    latestActivity = new Date();
                    $(this).dialog('close');
                }
            }
       });

但是它仍然显示对话框标题之前的空白。请查看所附的输出对话框。在这方面需要快速帮助。

Answer 1

按照您的描述，我无法复制该问题。我测试了以下内容：

$(function() {
  var opts = {
    title: "Session Timeout",
    message: "Your session has timed out.",
    logoutUrl: "logout.php"
  };

  function makeDiv(o) {
    if (o == undefined) {
      o = {
        id: "session-timeout-dialog"
      };
    }
    return $("<div>", o).html(opts.message).appendTo("body");
  }

  function makeDialog(tObj) {
    tObj.dialog({
      autoOpen: false,
      classes: {
        "ui-dialog": "no-close"
      },
      resizable: false,
      minWidth: 0,
      width: 300,
      minHeight: 0,
      height: 300,
      modal: true,
      closeOnEscape: false,
      title: opts.title,
      buttons: {
        "Log Out Now": function() {
          $(this).dialog('close');
          window.location = '' + opts.logoutUrl;
        },
        "Stay Connected": function() {
          latestActivity = new Date();
          $(this).dialog('close');
        }
      }
    });
  }

  $("#trigger").click(function() {
    var timeOut = makeDiv();
    makeDialog(timeOut);
    timeOut.dialog("open");
  });
});

.no-close .ui-dialog-titlebar-close {
  display: none;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id="trigger">Trigger Time Out</button>

高度正确。根据您的图像，我怀疑示例代码中未显示其他正在应用的样式。请检查并检查所有已应用的CSS。

希望有帮助。

对话框没有显示在jQuery中适当的高度

1 个答案: