0

我在使用 jQuery ui .dialog 对话框方面变得更好了，并且变得粗体，并且实际上阅读了有关新 ui .position 函数的文档，尽管我会尝试一下。

我的 DOM 中有一个很大的隐藏表 - 当我将它放在 .dialog 中时，它变得“未隐藏”。这是代码：

  $( "#addupdateinsurance" ).dialog({
                                     height: 350,
                                     width: 700,
                                     modal: true,
                                     title: "Add/Update insurance company",
                                     autoOpen: true,
                                     closeOnEscape: true
                                     });

这很好用。现在我想将它定位在 DOM 上的特定位置，并且正在阅读“新” .position 函数。我喜欢“级联”的概念，现在在 ajax 调用后使用 .done 代替旧的“成功：”。所以我这样做了：

  $( "#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" }
                                     });

所以我的问题是：

  1. 在第一个实例/错误/功能中，为什么表在放置在 $().dialog() 中时没有“绑定”到 .dialog - 为什么它不随对话框移动？
  2. 我可以将 .position 与其他东西（div、span 等）以级联格式使用吗？

再次感谢！

它有点大，这就是为什么我没有先把它放在那里，但它是：

<!--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;}
4

1 回答 1

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;}

看这里

于 2013-09-09T01:56:13.977 回答