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

Posted 2023-05-08

【中文标题】对话框未在 jquery 中以适当的高度显示

【英文标题】：dialog is not displaying with proper height in 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 不是根本原因的方式。 - 您可能需要重新绘制对话框，看看是否有帮助。

【参考方案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。

希望对您有所帮助。