我在使用jQuery ui .dialog框时变得更好,并且是粗体,并且实际上正在阅读关于新ui .position函数的文档,尽管我会尝试一下。
我的DOM中有一个很大的隐藏表 - 当我将它放在.dialog中时它会变成“unhidden”。这是代码:
$( "#addupdateinsurance" ).dialog({
height: 350,
width: 700,
modal: true,
title: "Add/Update insurance company",
autoOpen: true,
closeOnEscape: true
});
这很有效。现在我想把它放在DOM上的一个特定位置,并且正在阅读“new”.position函数。我喜欢“级联”的概念,现在在ajax调用之后使用.done而不是旧的“success:”。所以我这样做了:
$( "#addupdateinsurance" ).dialog({
height: 350,
width: 700,
modal: true,
title: "Add/Update insurance company",
autoOpen: true,
closeOnEscape: true
}).position({
my:"right center",
at:"right center",
of:"#centraldiv" });
它有效。对话框很好地移动到了我想要的位置,但是把桌子留在了另一个位置。
在播放了一段时间并阅读更多的.dialog和.position文档之后,我尝试了以下方法,它运行得很漂亮:
$( "#addupdateinsurance" ).dialog({
height: 350,
width: 700,
modal: true,
title: "Add/Update insurance company",
autoOpen: true,
closeOnEscape: true,
position:{my:"right center",
at:"right center",
of:"#centraldiv" }
});
所以我的问题是:
它有点大,这就是为什么我没有先把它放在那里,但它在这里:
<!--start add/update table-->
<table id="addupdateinsurance" class="addinsurancecotable">
<tr>
<td class="tablerjc" style="width:120px" >Company Name:</td><td style="width:200px" class="tableljc"><input id="companyname"></td>
<td style="width:120px" class="tablerjc">Name Type:</td><td style="width:200px" class="tableljc"><input id="companyname2"></td></tr>
</tr>
<tr>
<td class="tablerjc">Company Number:</td><td class="tableljc"><input id="companynum"></td>
<td class="tablerjc">Intermediary:</td><td class="tableljc"><input id="intermediary"></td>
</tr>
<tr>
<td class="tablerjc">Street 1:</td><td class="tableljc"><input id="street1" name="street1"></td>
<td class="tablerjc">Street 2:</td><td class="tableljc"><input id="street2"></td>
</tr>
<tr>
<td class="tablerjc">City:</td><td class="tableljc"><input id="city"></td>
<td class="tablerjc">State:</td><td class="tableljc"><input id="state" size = "5" name="state">
Zip:<input id="zip" size = "8" name="zip"></td>
</tr>
<tr>
<td class="tablerjc">Elig phone:</td><td class="tableljc"><input id="phoneelig" name="phoneelig"></td>
<td class="tablerjc">Business phone:</td><td class="tableljc"><input id="phone1" name="phone1"></td>
</tr>
<tr>
<td class="tablerjc">Elig web:</td><td class="tableljc"><input id="siteelig" name="siteelig"></td>
<td class="tablerjc">Business FAX:</td><td class="tableljc"><input id="fax" name="fax"></td>
</tr>
<tr>
<td colspan="4">
<button id="resetbutton" style="float:left;"> CLEAR ALL</button> <!--reset all input-->
<button id="submitbuttonadd" style="float:right"> Add/Update</button> <!--add problem-->
</td>
</tr>
</table>
<!--end add/update table-->
这是CSS:
.addinsurancecotable {
height:200px;
margin:10px auto 10px auto;
background-color:#E2E4FC;
display:none;}
.addinsurancecotable td {
border:0px solid black;
font-family:"Times New Roman", Times, serif;
font-size:14px;}
答案 0 :(得分:1)
将您的css更新为:
#centraldiv{
position:relative;
}
.addinsurancecotable {
height:200px;
margin:10px auto 10px auto;
background-color:#E2E4FC;
display:none;
position:absolute;
}
.addinsurancecotable td {
border:0px solid black;
font-family:"Times New Roman", Times, serif;
font-size:14px;}
请参阅here