Question

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

所以这是：jsFiddle

我认为问题在于函数调用。

<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>

Answer 1

您需要在jsFiddle（http://jsfiddle.net/3d7QC/1952/）中选择No wrap选项，否则showDialog是该范围的本地函数（jsFiddle放置它）。

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

Answer 2

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

当你正在使用它时，你也可以在内联脚本之前加载其余的脚本。

Javascript对话框废话

2 个答案: