Javascript 如何使这个JQuery窗口具有最小大小?

Javascript 如何使这个JQuery窗口具有最小大小?,javascript,jquery,html,css,jquery-ui,Javascript,Jquery,Html,Css,Jquery Ui,我一直在关注这个jquery演示,以便在我的网页上显示一个窗口。演示可以在这里找到: 我试图创建的窗口如下所示: 您会注意到,该窗口显示在实际网页上,可以选择按x或“确定”按钮返回实际网页。我想用我自己的窗口替换窗口的外观和内容,同时保留x和OK按钮的功能。我一直在浏览一些文件,在更改窗口宽度时遇到了一些问题。我的问题是如何根据屏幕大小或像素数的百分比设置窗口高度的宽度?我想有一个严格的窗口大小,以便它将符合我所要做的事情的要求。我一直很难让它发挥作用 以下是源代码: 由于我拍摄了代码截图,您

我一直在关注这个jquery演示,以便在我的网页上显示一个窗口。演示可以在这里找到:

我试图创建的窗口如下所示:

您会注意到,该窗口显示在实际网页上,可以选择按x或“确定”按钮返回实际网页。我想用我自己的窗口替换窗口的外观和内容,同时保留x和OK按钮的功能。我一直在浏览一些文件,在更改窗口宽度时遇到了一些问题。我的问题是如何根据屏幕大小或像素数的百分比设置窗口高度的宽度?我想有一个严格的窗口大小,以便它将符合我所要做的事情的要求。我一直很难让它发挥作用

以下是源代码:

由于我拍摄了代码截图,您还可以通过以下链接找到完整的源代码:

我查看了一些依赖项文件,如jquery.js和jquery-ui.js,但找不到需要更改的代码行,以声明窗口的特定且不可更改的宽度。我也查看了.css文件,但在那里没有找到任何运气。如果有人知道怎么做,我将不胜感激。谢谢

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

这应该在初始化时设置您的特定宽度。jQuery UI API参考包含此小部件的所有可用选项

您可以下载jQuery-UI.js文件并将其放入您自己的代码库中

然后,您可以根据自己的要求进行定制

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

$(function() {
$( "#dialog-message" ).dialog({
  modal: true,
  width : <custom value i.e., 400>,
  buttons: {
    Ok: function() {
      $( this ).dialog( "close" );
    }
  }
});
$(函数(){
$(“#对话框消息”).dialog({
莫代尔:是的,
宽度:,
按钮:{
好的:函数(){
$(此).dialog(“关闭”);
}
}
});
}))

然后可以从该js文件中更新width、minWidth和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,
var dialog=$.widget(“ui.dialog”{
版本:“1.11.4”,
选项:{
附:“身体”,
自动打开:对,
按钮:[],
closeOnEscape:没错,
关闭文本:“关闭”,
对话框类:“”,
真的,
hide:null,
高度:“自动”,
maxHeight:null,
maxWidth:null,
身高:150,
最小宽度:150,
莫代尔:错,
职位:{
我的“中心”,
在“中心”,
窗户,
碰撞:“适合”,
//确保标题栏始终可见
使用:功能(pos){
var topOffset=$(this).css(pos).offset().top;
if(拓扑偏移<0){
$(this.css(“top”,pos.top-topOffset);
}
}
},
可调整大小:正确,
show:null,
标题:空,
宽度:500,
宽度属性位于标准下载文件的第8138行


另一种方法是添加css类,并在其中定义宽度、高度参数,并将其包含在addClass(“”)中在js文件中创建小部件的属性。

你看到了吗?这看起来很有用。我会调查。谢谢!谢谢你的帮助!我在哪里找到那段代码?我假设它在我的jquery-ui.js中。这是正确的吗?是的。有一个“dialog”对象控制它。你可以通过查找文本找到这段代码“jQuery UI对话框”(它可能位于不同的行上,具体取决于您对文件的版本和自定义)。该对象中的相关函数将为_size、options和open