为什么对话框不显示？答案

【问题标题】：Why is the dialog not showing?为什么对话框不显示？
【发布时间】：2018-08-25 16:41:24
【问题描述】：

alert() 在单击发送按钮时起作用，但对话框从不显示。我一直在疯狂地试图弄清楚为什么会这样。我究竟做错了什么？请看下面的代码：

谢谢， TD

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DIALOG TEST</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>   
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body onload="loadMsg()">

    <div id="dg"></div>

    <div id="#dialog_login" title="Login Status">
        <br />
        <div id="dialog_text" style="text-align: center;"></div>
    </div>

    <script type="text/javascript" src="dg.js"></script>
</body>
</html>

form.html

    <div class="panel panel-default">
        <div class="panel-heading">TEST</div>
            <div class="panel-body">
                <form method="post" action="javascript:msg();">  
                    <div class="form-group">
                        <input type="submit" name="submit" value="Send" id="submit" class="btn btn-primary">
                    </div                       
                </form>   
            </div>
        </div>
    </div>

dg.js

function msg(){
    $("#dialog_login").text('Login Successful');
    $("#dialog_login").dialog('open');
    alert('Login Successful');  
}

function loadMsg(){
    $("#dg").load("form.html");
}

【问题讨论】：

您是否在 JavaScript 控制台中遇到错误？
有什么理由使用两个版本的 jQuery？
如果我正确使用 Chrome 开发者工具，则不会出错。没有理由使用多个版本的 JQuery。我将删除旧版本，看看会发生什么并报告
好的，注释掉每个 JQuery 版本，一次一个，但对话框仍然不显示。

标签： javascript jquery html jquery-ui-dialog

【解决方案1】：

您好，我修改了一点代码，希望对您有用

function msg(){
$("#dialog_text").text('Login Successful');
$("#dialog_login").dialog({
    show: { effect: "blind", duration: 800 } 

  })
};

你还有其他错误

 <div class="form-group">
                    <input type="submit" name="submit" value="Send" id="submit" class="btn btn-primary">
                </div

用“>”关闭div

 <div class="form-group">
                    <input type="submit" name="submit" value="Send" id="submit" class="btn btn-primary">
                </div>

【讨论】：

我修复了 div 并将您的 js 代码复制到 dg.js 中替换了我的代码，但对话框仍然不会显示。感谢您的帮助！
请在loadMsg()函数$("#dg").load("form.html");中注释该行并再试一次
我做了，正如预期的那样，屏幕是空的，因为这段代码使用 form.html 中的按钮加载表单，所以没有按钮可以点击。

【解决方案2】：

好的，经过几个小时的研究，我发现了问题；我在 id 中添加了“#”：

<div id="#dialog_login" title="Login Status">

我更正了：

 <div id="dialog_login" title="Login Status">

接下来我在 dg.js 中添加了这一行：

$('#dialog_login').dialog({autoOpen: false});

所以 dg.js 现在看起来像这样：

function msg(){
$('#dialog_login').dialog({autoOpen: false});
$("#dialog_login").text('Login Successful');
$("#dialog_login").dialog('open');
alert('Login Successful');  
}

function loadMsg(){
    $("#dg").load("form.html");

我要感谢所有试图提供帮助的人！

【讨论】：