диалог не отображается с правильной высотой в jquery - PullRequest
Новая
       48

диалог не отображается с правильной высотой в jquery

0 голосов
/ 15 мая 2019

Я добавляю диалог 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');
                }
            }
       });

Но это все еще показывает разрыв перед заголовком диалога.Пожалуйста, смотрите прикрепленный диалог вывода.Нужна быстрая помощь по этому вопросу.

enter image description here

1 Ответ

0 голосов
/ 16 мая 2019

Мне не удалось воспроизвести проблему, как вы ее описали.Я проверил со следующим: 

$(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, которые применяются.

Надеюсь, что поможет.

...