博客分类：
由于Jquery UI dialog 的弹出窗口默认z-index值为1000，所以凡是在窗口内的元素设置了低于1000的z-index，都无法操作，所以在初始化弹出窗口时，更改下z-index值即可。
$('#add-form').dialog({
autoOpen: false,
height: 322,
width: 608,
modal: true,
zIndex: -1,
close: function() { },
open:function(event, ui){ }
浏览: 149763 次
来自: 武汉
这个楼主热心肠，看得简单明了
楼主写的不错，感谢分享，最近我在
http://gotoma ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'jquery-ui dialog属性学习_百度文库
您的浏览器Javascript被禁用，需开启后体验完整功能，
享专业文档下载特权
&赠共享文档下载特权
&100W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
jquery-ui dialog属性学习
&&jquery-ui dialog 是jquery插件,挺好用的
你可能喜欢jquery - JQueryUI Dialog Size - Stack Overflow
to customize your list.
This site uses cookies to deliver our services and to show you relevant ads and job listings.
By using our site, you acknowledge that you have read and understand our , , and our .
Your use of Stack Overflow’s Products and Services, including the Stack Overflow Network, is subject to these policies and terms.
Join Stack Overflow to learn, share knowledge, and build your career.
or sign in with
I'm new to JQueryUI, and though I have a dialog working, it doesn't open at the size I think I'm specifying.
Why does setting the width and height when the dialog is defined not affect the initial size of the dialog?
How do I make it 600px by 500 px?
Here is the div that defines the dialog:
&div id="dialog-form" title="Create Appointment"&
&form& . . . &/form&
Here is the JavaScript that makes a dialog of it:
$(function() {
$("#dialog-form").dialog({
autoOpen: false,
maxWidth:600,
maxHeight: 500,
width: 600,
height: 500,
modal: true,
buttons: {
"Create": function() {
$(this).dialog("close");
Cancel: function() {
$(this).dialog("close");
close: function() {
And the JavaScript that defines the button to open it:
$("#create-appt")
.click(function() {
$("#dialog-form").dialog("open");
I see the problem now: this would have worked fine, except I was running it in Google Chrome using the --app=... command-line option, so it was not reloading the whole application.
5,08023659
Question: Why does setting the width and height when the dialog is defined not affect the initial size of the dialog?
Answer: It does...
what browser are you using and version of jQuery.
I cut/pasted your code from above into a small sample and it worked perfectly... I pasted the full sample below you can try it on your end.
&meta http-equiv="Content-Type" content="text/ charset=iso-8859-1" /&
&title&jQuery UI Example Page&/title&
&link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css"
rel="stylesheet" /&
&script type="text/javascript" src="js/jquery-1.5.1.min.js"&&/script&
&script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"&
&script type="text/javascript"&
$(document).ready(function () {
$(function() {
$("#dialog-form").dialog({
autoOpen: false,
maxWidth:600,
maxHeight: 500,
width: 600,
height: 500,
modal: true,
buttons: {
"Create": function() {
$(this).dialog("close");
Cancel: function() {
$(this).dialog("close");
close: function() {
$("#create-appt")
.click(function() {
$("#dialog-form").dialog("open");
&h1&test&/h1&
&div id="dialog-form" title="Create Appointment"&
&p& this is my test &/p&
&input type="button" id="create-appt" value="test"/&
2,84521429
1,11111026
I don't know exactly what it's happening, but you can change a little bit your code and it'll produce the result you expect:
Instead of use autoOpen you can set these options on the onclick event:
$("#create-appt")
.click(function() {
$("#dialog-form").dialog({width: 600,height:500});
I hope this helps
best regards,
Marcelo Vismari
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Post as a guest
Post as a guest
Post Your Answer
By clicking &Post Your Answer&, you acknowledge that you have read our updated ,
and , and that your continued use of the website is subject to these policies.
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled博客分类：
最近一直在学习jQuery，其中的一款插件引起了我的注意：jQuery UI（）
今天学习的是其中的dialog部分，弹出对话框是web设计中经常出现的内容，jQueryUI插件的该功能非常强大提供了非常多的选项和事件处理（），特别是可以将设计在网页中的内容作为弹出框的内容。
在这一篇博文中，我就用一个自己写的例子来实践一下dialog的使用（这个例子包含了jQuery获取json文件的功能）。
首先需要引入的文件（为了方便，直接引用Google提供的资源，也可以选择直接下载到本地）：
&link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"&
&script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&&/script&
&script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"&&/script&
然后可以看看，body部分的设计内容：
&div id="dialog1"&
&thead&&tr&&td&姓名&/td&&td&性别&/td&&td&年龄&/td&&td&邮箱&/td&&/tr&&/thead&
&tbody id="Data"&&/tbody&
&button id="showDialog"&show the dialog&/button&
div的内容将会被显示在dialog中，tbody将被用于显示json数据，button用于触发显示dialog事件。
另外我们得准备一个json文件UserInfo.json（和网页放在同级目录下），内容如下：
"name":"王天",
"sex":"男",
"years":"12",
"email":""
"name":"小文",
"sex":"女",
"years":"21",
"email":""
现在就需要看看最关键的，jQuery代码了：
$(function(){
$("#dialog1").dialog({
autoOpen:false,//该选项默认是true，设置为false则需要事件触发才能弹出对话框
title:'信息列表',//对话框的标题
width:400,//默认是300
modal:true//设置为模态对话框
$("#showDialog").click(function(){
getData();//获取json数据
$("#dialog1").dialog('open');//设置为‘open’时将显示对话框
function getData(){//获取json数据的函数
$.getJSON("UserInfo.json",function(data){
$("#Data").empty();//先清空tbody
var strHTML = "";
$.each(data,function(InfoIndex,Info){//遍历json里的数据
strHTML += "&tr&";
strHTML += "&td&"+Info["name"]+"&/td&";
strHTML += "&td&"+Info["sex"]+"&/td&";
strHTML += "&td&"+Info["years"]+"&/td&";
strHTML += "&td&"+Info["email"]+"&/td&";
strHTML += "&/tr&";
$("#Data").html(strHTML);//显示到tbody中
大功告成，这样就可以在弹出框中看到json传来的表格数据了，弹出框的内容框架是提前写好到body标签里的。
浏览 14325
浏览: 160345 次
来自: 北京
我也碰到如此问题，
我也遇到这个问题了，感谢你的总结，很有帮助
题目写的这么大，没什么实质性内容
其实把 swap 函数里面的 print出来，大家就更容易 ...
页面结构完成之后，才加载js文件，是不是就意味着先展示静态内容 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'博客分类：
&script type="text/javascript" src="/js/jquery.bgiframe.min.js"&&/script&
引用以上JS代码。
注意：jquery 与 jquery.bgiframe插件的对应版本
JS代码 加入红色部分
$("#dialog-editor").dialog({
bgiframe : true,
autoOpen : false,
width : 680,
height : 600,
modal : true,
position:[50,100],
buttons : {
"确认" : function() {
var ret = __getEditorContent();
$(_clickedInput).parent("p").next().text(ret);
//编辑器内容回写到textarea中
$(this).dialog("close");
"取消" : function() {$(this).dialog("close");}
close: function() {
$("#dialog-editor").dialog("open");
浏览: 746004 次
来自: 郑州
截图看不见，最后一个webwrok的配置看不见
弱弱的问一句，要是分出来的词在词典中没有，那么两部分的pos- ...
授人予鱼不如授人予鱼，我想问你的是你是怎么总结的。比如第四种情 ...
执行两次的原因是什么，好像楼主没弄清楚啊！是不是在web.xm ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'