在 jquery 对话框中插入表单答案

【问题标题】：Insert a form inside a jquery dialog box在 jquery 对话框中插入表单
【发布时间】：2016-06-01 10:03:55
【问题描述】：

朋友，我想要一个可以接受来自用户的值的对话框。我已经尝试创建一个并在一定程度上成功，但问题是无论我想在我的对话框中显示什么，它也会显示在其中就像我的正文部分一样。请告诉我如何仅在我的对话框中显示该表单。提前致谢。这是我的代码-

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

【问题讨论】：

对我来说似乎工作得很好
如果您发现任何错误，请告诉我们
没有错误...只是这些输入字段显示在我的主屏幕上，当该对话框弹出时，这些字段从我的屏幕上消失，它们出现在对话框中@SandeepNayak
jsfiddle.net/8Lsjx5bt 看起来不错

标签： javascript jquery html dialog

【解决方案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>

【讨论】：

哦..对不起..谢谢@JayeshChitroda

【解决方案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>

【讨论】：

这很好，和我的代码一样，但它也在我的正文部分显示表单..我想解决..但现在它解决了..感谢@Jayesh Chitroda