Question

我在使用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" }
                                     });

所以我的问题是：

在第一个实例/错误/功能中，为什么当表放在$（）。dialog（）中时，表“绑定”到.dialog - 为什么它不随对话框一起移动？< / LI>
我可以使用.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;}

Answer 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

移动时，jQuery ui .dialog中的表不跟随对话框

再次感谢！

1 个答案: