JQuery对话框中的元素太大了

时间:2017-12-25 12:20:52

标签: javascript jquery html css

我有一个使用JQuery的页面,并在按下特定按钮时打开一个对话框。但问题是内容和对话本身太大了。我知道在JQuery中我可以调整对话框的大小(我实际上通过将宽度设置为1500来实现,否则它会在中间显示切片),但内容是什么?



$(document).ready(function() {
  var dialogAddPartDiv = $('#dialogAddPart');

  $('#showDialogButton').click(function() {
    dialogAddPartDiv.dialog('open');
  });

  dialogAddPartDiv.dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      'Save': function() {}
    },
    beforeClose: function(event) {
      if (!confirm("It won't be saved. Continue?")) {
        return false;
      } else {}
    },
    width: 1500
  });
});

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<body>


  <button type="button" id="showDialogButton">+Show Dialog</button>

  <div id="dialogAddPart">

    <table>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td><input type="text" size="80" value=""></td>
      </tr>

      <tr>
        <td>Test:</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td><input type="text" size="80" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>

      <tr>
        <td>Test</td>
        <td><input type="text" size="65" value=""></td>
      </tr>


    </table>

  </div>

</body>
&#13;
&#13;
&#13;

您会看到对话框大小(和内部内容)的大小比按钮大。我怎样才能正确设置?

1 个答案:

答案 0 :(得分:0)

由于你正在使用的这个attr

,你的桌子大小
size="85"

默认情况下,表格采用案例“85”中定义的所有列的最大值

只需删除它们并尝试,它可以正常工作

http://jsfiddle.net/Zrz9t/4000/