Question

我一直关注这个jquery演示，以便在我的网页上显示一个窗口。可以在此处找到演示：http://jqueryui.com/dialog/#modal-message

我尝试创建的窗口如下所示：

您会注意到窗口显示在实际网页上，可以选择按x或okay按钮返回实际网页。我想用自己的窗口替换窗口的外观和内容，同时保持x和okay按钮的功能。我一直在查看一些文件，并且在更改窗口宽度方面遇到了一些问题。我的问题是如何根据屏幕尺寸或像素数的百分比设置窗口高度的宽度？我希望有一个严格的窗口大小，以便它符合我尝试做的要求。我一直很难让这个工作。

这是源代码：

由于我拍了代码截图，您还可以通过以下链接找到完整的源代码：http://jqueryui.com/dialog/#modal-message

我查看了一些依赖文件，如jquery.js和jquery-ui.js，但是我无法找到我需要更改的代码行，以断言窗口的特定且不可更改的宽度。我也查看了.css文件，但没有找到任何运气。如果有人知道如何做到这一点我会非常感激。谢谢。

Answer 1

$( "#dialog-message" ).dialog({
  width: 500
});

这应该在初始化时设置您的特定宽度。 jQuery UI API参考具有此窗口小部件的所有可用选项http://api.jqueryui.com/dialog/

Answer 2

您可以下载jquery-ui.js文件并将其放在您自己的代码库中。

然后您可以根据自己的要求自定义它。

您可以将jquery代码中的参数传递为：

$(function() {
$( "#dialog-message" ).dialog({
  modal: true,
  width : <custom value i.e., 400>,
  buttons: {
    Ok: function() {
      $( this ).dialog( "close" );
    }
  }
});

}）;

你可以更新宽度，minWidth＆amp;然后是那个js文件的minHeight属性。

var dialog = $.widget( "ui.dialog", {
version: "1.11.4",
options: {
    appendTo: "body",
    autoOpen: true,
    buttons: [],
    closeOnEscape: true,
    closeText: "Close",
    dialogClass: "",
    draggable: true,
    hide: null,
    height: "auto",
    maxHeight: null,
    maxWidth: null,
    minHeight: 150,
    minWidth: 150,
    modal: false,
    position: {
        my: "center",
        at: "center",
        of: window,
        collision: "fit",
        // Ensure the titlebar is always visible
        using: function( pos ) {
            var topOffset = $( this ).css( pos ).offset().top;
            if ( topOffset < 0 ) {
                $( this ).css( "top", pos.top - topOffset );
            }
        }
    },
    resizable: true,
    show: null,
    title: null,
    width: 500,

width属性在标准下载文件中的第8138行。

另一种方法是添加一个css类并在那里定义width，height参数，并将其包含在js文件中创建小部件的addClass（＆＃39;＆＃39;）属性中。

如何使这个JQuery窗口具有最小尺寸？

2 个答案: