Question

朋友们，我想要一个可以接受来自用户的值的对话框。我尝试过创建一个并成功到一定程度，但问题是无论我想在对话框中显示什么，它都会显示在其中在我的身体部分。请告诉我如何才能在我的对话框中显示该表单。提前致谢。这是我的代码 -

<body>
<div id="add_dialog" title="New Entry">
  <form >
    <p>
    Name:<input type="text" name="name" /></p>
   <p> Group:<select><option value="p">p</option>
    <option value="s">s</option></select></p>
 </form>
</div>
</body>

我的Jquery -

$('#add_dialog').dialog({
    modal: true,
    overlay: {
        opacity: 0.7,
        background: "black"
    },
    buttons: {
        "ADD": function() {
            $(this).dialog('close');
            alert("added to the list");
        },
        "CANCEL": function() {
            $(this).dialog('close');
            alert("Select name from the list");
        }
    }
});

Answer 1

只需将display:none样式添加到add_dialog对话框div即可。这样它就不会出现在主屏幕上，但在对话框中会显示出来。

<div id="add_dialog" title="New Entry" style="display:none;">
  <form >
    <p>
    Name:<input type="text" name="name" /></p>
   <p> Group:<select><option value="p">p</option>
    <option value="s">s</option></select></p>
 </form>
</div>

Answer 2

似乎工作正常。请确保您使用了正确的id

$('#add_dialog').dialog({
  modal: true,
  overlay: {
    opacity: 0.7,
    background: "black"
  },


  buttons: {
    "ADD": function() {
      $(this).dialog('close');
      alert("added to the list");
    },
    "CANCEL": function() {
      $(this).dialog('close');
      alert("Select name from the list");
    }

  }


});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="add_dialog" title="New Entry">
  <form>
    <p>
      Name:
      <input type="text" name="name" />
    </p>
    <p>Group:
      <select>
        <option value="p">p</option>
        <option value="s">s</option>
      </select>
    </p>
  </form>
</div>

在jquery对话框中插入表单

2 个答案: