对话框未在 jquery 中以适当的高度显示答案

【问题标题】：dialog is not displaying with proper height in jquery对话框未在 jquery 中以适当的高度显示
【发布时间】：2019-10-02 04:33:36
【问题描述】：

我将 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');
                }
            }
       });

但它仍然显示对话框标题之前的间隙。请参阅附加的输出对话框。在这方面需要快速帮助。

【问题讨论】：

是否有任何 CSS 样式应用于 #sessionTimeout-dialog 可能会干扰 jQuery 样式？编辑：还是#sessionTimeout-timer？
未应用其他样式
我建议您尝试：- - 标头内容中有什么（会话超时警告）？请右键单击并检查。可能是带有空格的真实数据。 - 使用带有 !important 标签的样式对其进行测试。这将强制样式就位并超级种子任何 CSS 样式。这就是您确认 CSS 不是根本原因的方式。 - 您可能需要重新绘制对话框，看看是否有帮助。

标签： jquery jquery-ui jquery-ui-dialog

【解决方案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。

希望对您有所帮助。

【讨论】：