Fatal编程技术网

Javascript对话框胡说八道

javascript jquery html

Javascript对话框胡说八道,javascript,jquery,html,Javascript,Jquery,Html,我想在我的页面上有一个按钮，显示一个对话框，询问文本，另一个按钮提交信息到电子邮件onClick。我无法显示对话框。我修改了JSFIDLE上的一个现有示例，该示例显示了onCreate对话框；但是，我需要在单击按钮时显示对话框 这就是： 我相信问题在于函数调用 <p><a href="#dialog-message" onclick="showDialog();">Question</a></p> 这是我的HTML页面的开始： <!DOCT

我想在我的页面上有一个按钮，显示一个对话框，询问文本，另一个按钮提交信息到电子邮件onClick。我无法显示对话框。我修改了JSFIDLE上的一个现有示例，该示例显示了onCreate对话框；但是，我需要在单击按钮时显示对话框

这就是：

我相信问题在于函数调用

<p><a href="#dialog-message" onclick="showDialog();">Question</a></p>
这是我的HTML页面的开始：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My title &middot; stuff</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/prettify.css" rel="stylesheet">
    <link href="css/flat-ui.css" rel="stylesheet">
    <link href="css/docs.css" rel="stylesheet">
    <link rel="shortcut icon" href="images/favicon.ico">
    <style>
           .containerx {
        background-color: #1abc9c;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-attachment: scroll;
        }    
        .imag{
        padding-left:10px;
        padding-top:10px;
        }        
    </style>


     <script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/bootstrap-switch.js"></script>
<script src="js/flatui-checkbox.js"></script>
<script src="js/flatui-radio.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="bootstrap/js/google-code-prettify/prettify.js"></script>
<script src="js/application.js"></script>   

<script>
  function showDialog(){
     $("#dialog-message").dialog({
        modal: true,
        draggable: false,
        resizable: false,
        position: ['center', 'center'],
        show: 'blind',
        hide: 'blind',
        width: 400,
        dialogClass: 'ui-dialog-osx',
        buttons: {
            "Send question": function() {
                  $(this).dialog("close");
             }
        }
     });
  }
</script>
您需要在jsFiddle中选择No wrap选项，否则showDialog是jsFiddle所在范围的本地函数

如果是您自己的页面，请不要忘记包含jquery ui。

我最好的猜测是，在运行函数时，jquery ui没有加载。您需要将jQuery UI脚本移动到jQuery之后

当您正在加载时，您可以先加载其余脚本，然后再加载内联脚本。

如果您在小提琴中选择正确的加载方法，效果会很好：我这样做了，它也可以工作。然而，如果我在我的真实页面中这样做。它不起作用。我的意思是，我在标题部分添加了脚本，但它不起作用。即使在小提琴中也能起作用。我做错了什么？你只是忘了包括jqueryui：如果没有看到你的页面，很难说出来。检查浏览器控制台是否有错误？我为您附上了问题正文中页眉部分的开头。请看，我在函数开始之前就在头部包含了jquery，但仍然没有成功。我在标题部分上方添加了问题，以便您可以查看上面我的标题部分，并告诉我我做错了什么？对我来说，它看起来确实包含了jquery ui……问题出现在我的本地jquery脚本中。我用在线CDN取代了它，现在它可以工作了。谢谢大家抽出时间。您的答案是第一个提到包含jQueryUI的问题，即使它被包含在第一个位置，尽管它仍然不能正常工作，但问题来自这一行代码。所以你的答案是我接受的，我这么做了，仍然不起作用。我在问题body-tooth中进行了更改，问题出现在我的本地jquery脚本中。我用在线CDN取代了它，现在它可以工作了。谢谢大家抽出时间。我将接受关于加载jquery的第一个问题