带有表单的 JQUERY 对话框答案

【问题标题】：JQUERY dialog box with form带有表单的 JQUERY 对话框
【发布时间】：2021-07-09 07:09:55
【问题描述】：

我的 Jquery 对话框没有隐藏。加载页面时，它会自动调用并显示，而我将其属性设置为 autopen 为 false。我设置了一个按钮来单击事件以打开对话框。但没有白费

我的 Jquery 代码在这里

$(document).ready(function () {
            $("#dialog").dialog({
                buttons: [{ text: "OK", click: function () { $(this).dialog("close") } }],
                modal: true,
                autoOpen: false
            });
            $('#btnpopup').click(function () {
                $('#dialog').dialog("open");
            });

我的 HTML 代码

<div >
            <asp:Button ID="btnpopup" runat="server" Text="Add Instruction" />
        </div>
        <div id="dialog">
             <table>
           <tr>
               <td>Title</td>
               <td>
                   <asp:TextBox ID="titlefield" runat="server"></asp:TextBox>

               </td>
                <td>Instruction Category</td>
               <td>
                   <select id="category"></select>

               </td>
           </tr>
          <tr>
              <FTB:FreeTextBox ID="FreeTextBox1" runat="server"></FTB:FreeTextBox>
          </tr>
                         
                
       </table>
        </div>

包含的库

e<script src="Scripts/jquery-ui-1.12.1.js" ></script>

<script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
<link href="Content/jquery.layout-1.4.3.css" rel="stylesheet" />
<link href="Content/jquery.ui.layout.css" rel="stylesheet" />
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-ui-1.12.1.js"></script>nter code here

【问题讨论】：

标签： javascript jquery onclick dialog popup

【解决方案1】：

从您的代码看来，您两次加载了 jquery ui 库，因此发生了冲突。只需在加载 jquery 库后仅使用一次。请参阅下面的参考资料。

<script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
<link href="Content/jquery.layout-1.4.3.css" rel="stylesheet" />
<link href="Content/jquery.ui.layout.css" rel="stylesheet" />
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-ui-1.12.1.js"></script>

【讨论】：

我应该放置哪些库，哪些应该跳过，请帮助
我已经给了你上面的列表，请复制并粘贴它。
这些好像是我的。
请检查并比较您是否在库顶部添加了 Scripts/jquery-ui-1.12.1.js，我已将其删除。
我更新了这些库，但结果仍然相同。现在显示了一个对话框，但同时消失了

【解决方案2】：

你好像忘了放最后一个花括号和一个括号}）它适用于我的 screenshot

$(document).ready(function () {
        $("#dialog").dialog({
            buttons: [{
                text: "OK",
                click: function () {
                    $(this).dialog("close")
                }
            }],
            modal: true,
            autoOpen: false
        });
        $('#btnpopup').click(function () {
            $('#dialog').dialog("open");
        });
    })

Codepen

【讨论】：