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

时间:2013-09-09 01:21:40

标签: jquery dialog position

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

所以我的问题是:

  1. 在第一个实例/错误/功能中,为什么当表放在$()。dialog()中时,表“绑定”到.dialog - 为什么它不随对话框一起移动?< / LI>
  2. 我可以使用.position以及其他东西(div,span等)的级联格式吗?
  3. 再次感谢!

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

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

1 个答案:

答案 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