在jQuery对话框中插入表单
[英]Insert a form inside a jquery dialog box
问题描述
Friends,I want a dialog box that can accept values from the user.I have tried creating one and succeeded to an extent but the problem is that whatever i want to display in my dialog box ,it gets displayed into it as well as in my body section.Please tell me how can i display that form inside my dialog box only. 
朋友，我想要一个可以接受用户值的对话框。我尝试创建一个对话框并在一定程度上成功了，但问题是无论我想在对话框中显示什么，它都会显示在对话框中以及我的对话框中正文部分。请告诉我如何仅在对话框中显示该表单。 Thanks in advance. 提前致谢。 Here is my code- 这是我的代码-
<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>
My Jquery- 我的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");
}
}
});
2 个解决方案
解决方案1
1 已采纳 2016-06-01 10:07:00
Just add display:none style to add_dialog dialog div. 只需在add_dialog对话框div中添加display:none样式即可。 so that it will not appear in main screen but in dialog box it will be displayed. 因此它不会出现在主屏幕中，而是会显示在对话框中。
<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>
解决方案2
0 2016-06-01 10:18:51
It seems to just work fine. 看来一切正常。 Make sure, you have used proper id 确保您使用了正确的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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.