如何使用jQuery的叠加对话框作为反馈表单

时间:2013-12-05 12:16:05

标签: javascript jquery overlay jquery-dialog

我正在尝试创建一个对话框(点击)以获得反馈。我先尝试过简单的事情。 Here's the fiddle

$("#feed_win").dialog({
    autoOpen:false;
});


$("#feedback").click( function() {
    $( "#feed_win" ).dialog( "open" ); 
});

但每次加载时,对话框都会显示在按钮单击事件之前。任何帮助都会有用。

所以,现在我试过了。

<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script type="text/javascript">

    $("#feedback").button().click(function() {
          $("#feed_win").dialog("open");
        });

        $("#feed_win").dialog({
        autoOpen: false,
        modal: true,
        height: 300,
        width: 400
    });
    </script>
    </head>
    <body>
    <button id="feedback">Delete profile</button>

          <div id="feed_win">
            <h2>This is feedback form</h2>
            <p>You can add your feedback here</p>
        </div>
    </body>

但是对话框div显示在页面加载上。为什么?单击按钮后应显示它。

1 个答案:

答案 0 :(得分:2)

您需要在头部包含jQuery UI脚本:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

这是小提琴:DEMO

你写的其他所有内容都很好,只需添加该行

即可