推荐简单的 jquery 对话框示例？答案

【问题标题】：Recommendation for simple jquery dialog example?推荐简单的 jquery 对话框示例？
【发布时间】：2014-07-23 17:38:14
【问题描述】：

到处搜索关键字“简单的 jquery 对话框示例” - 有了所有答案，我还没有在简洁的独立 .html 文档中看到任何简单而有意义的示例。即使下载了几本关于 jQuery 的完整书籍，我也没有看到任何这样的例子。

我找到的示例是用于显示警告消息“Hello World”的对话框......对于交互不是很有用。我认为现实世界的示例将是捕获输入并将其发送回页面而不需要发回服务器的东西。服务器发布可以是后续步骤。

任何人都可以推荐这些方面的代码参考吗？谢谢

编辑#3

我在下面粘贴了一个新帖子的解决方案。它是一个完全独立的文件，包含随时可用的内容。它对我有用。

编辑#2

我更新了 head 块以包含缺少的 css。现在没有显示对话框内容，但对话框仍然没有打开..并且控制台中没有错误。

                <style>
                #dialog {
                        display:none;
                    }
                </style>

编辑~尝试#1

根据@rob-schmuecker 的回答，我尝试了以下代码。我看到它在 jsFiddle 上工作，但我的实现不起作用。在我的浏览器中，控制台没有显示任何错误。但是我看到了两个问题：

对话框 div 内容直接加载到页面中
单击加载对话框按钮不起作用

知道这段代码有什么问题吗？ .. 可能是我的 jquery 包含调用吗？

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js" type="text/javascript"></script>

      <script type="text/javascript">

      //Initialize dialog

      $("#dialog").dialog({
          autoOpen: false,
          show: {
              effect: "blind",
              duration: 1000
          },
          hide: {
              effect: "explode",
              duration: 1000
          }
      });

      //Open it when #opener is clicked
      $("#opener").click(function () {
          $("#dialog").dialog("open");
      });

      //When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
      $('.formSaver').on('click', function () {
          $('.myTarget').text($('.myInput').val());
          $("#dialog").dialog('close');
      });

      </script>

                <style>
                #dialog {
                        display:none;
                    }
                </style>

    </head>
    <body>

    <div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>

    <div id="dialog" title="Basic dialog">
        <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
        <input class="myInput" type="text" />
        <button class="formSaver">Save me!</button>
    </div>

    <button id="opener">Open Dialog</button>

    </body>
    </html>

【问题讨论】：

jqueryui.com/dialog/#modal-form 正是您所要求的。
你的意思是prompt()？
jsfiddle.net/robertrozas/VzJe8/112
#hanlet-escaño、#robert-rozas、#rob-schmuecker - 所有这些都是很好的例子，我喜欢看到可以接近它的各种方式......非常感谢！了解此类问题的代码示例可以直接在 jqueryui.com 网站上找到非常有帮助。
鉴于我看到了 3 个正确答案，我不确定将哪个标记为正确 .. 因为我不想劝阻其他人放弃任何这些解决方案，每一个对我来说都是 100%。我知道我只能将#rob-schmuecker 标记为正确，但仍然......我想你明白我在这种情况下的意思。这里有关于最佳实践的建议吗？

标签： jquery jquery-ui-dialog

【解决方案1】：

好的，这就去

演示：http://jsfiddle.net/robschmuecker/9z2ag/1/

HTML：

<div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>

<div id="dialog" title="Basic dialog">
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <input class="myInput" type="text" />
    <button class="formSaver">Save me!</button>
</div>

<button id="opener">Open Dialog</button>

对话框以 CSS 开始隐藏：

#dialog {
    display:none;
}

然后我们做一些Javascript：

//Initialize dialog
$("#dialog").dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 1000
    },
    hide: {
        effect: "explode",
        duration: 1000
    }
});

//Open it when #opener is clicked
$("#opener").click(function () {
    $("#dialog").dialog("open");
});

//When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
$('.formSaver').on('click', function () {
    $('.myTarget').text($('.myInput').val());
    $("#dialog").dialog('close');
});

【讨论】：

嗨@rob-schmuecker，实际上这是迄今为止我认为最简洁的例子。如上所述..在这里回顾一下：我尝试了您建议的代码，但它不起作用。在我的浏览器中，控制台没有显示任何错误。但是我看到了两个问题 - 对话框内容直接加载到页面中，并且单击加载对话框按钮不起作用。我看到它在 jsFiddle 上工作 - 知道我的实现有什么问题吗？谢谢
您需要为正确的对话框 ID 设置 CSS，这样它就不会在页面首次加载时显示。您还需要确保在页面的 head 标记中包含 jQuery。
@RobSchmuecker, autoOpen:false 自动隐藏对话框。你不需要display:hidden;。
@TricksfortheWeb 尝试其他浏览器，而不仅仅是 chrome，它的正确 Rob .. 谢谢！

【解决方案2】：

它不起作用的原因是你对 jQuery 和 jQuery UI 的调用是这样的：

http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

但加载它的 URL 是：

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

输入正确的 URL 即可。

补充：

问题在于您对 jQuery 的第二次调用：

http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js

除了 jQuery 是从 https 加载的，没有 jquery.js，它是 jquery.min.js。

【讨论】：

我尝试了您的建议，即在“EDIT ~ ATTEMPT #1”下的代码的标头脚本 url 中使用 https .. 虽然我同意我应该使用 https，但这并没有解决问题..仍然没有弹出窗口。您是否能够通过添加 https 来使该代码工作？
在我的fiddle 中，它可以工作，尽管由于某种原因，jquery ui 样式表没有加载。但对话框正常工作。

【解决方案3】：

感谢大家的回答——我看到他们都在 JsFiddle 和 jqueryui.com 上在线工作。对于我所追求的，据我所知，这是我能够使用所有远程包含并基于 java2s.com 上的解决方案的最简洁的解决方案：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">

    <script type="text/javascript">
    $(function() {

        // Allows user to click Enter key in text field and it will submit the dialog
        $('#myDialog').keypress(function(e) {
            if (e.keyCode == $.ui.keyCode.ENTER) {
                getResponse();
            }
        });

        var cancel = function() {
            $("#myDialog").dialog("close");
        }

        var getResponse = function() {
            var answer;
            /*// for radio-button selection
            $("input").each(function(){
              (this.checked == true) ? answer = $(this).val() : null;
            });
             */

            answer = $("#first_name").val();

            // This adds it dynamically
            // $("<p>").text(answer).insertAfter($("#poll"));
            $("#result").text(answer);
            $("#myDialog").dialog("close");
        }

        var dialogOpts = {
            modal : true,
            closeOnEscape : true,
            buttons : {
                "Done" : getResponse,
                "Cancel" : cancel
            },
            autoOpen : false
        };
        $("#myDialog").dialog(dialogOpts);
        $("#poll").click(function() {
            $("#myDialog").dialog("open");
        });
    });
    </script>

</head>
<body>
    <button id="poll">Poll</button>
    <div id="myDialog" class="flora" title="This is the title">
      <p>Question?</p>
      <label for="yes">Yes!</label><input type="radio" id="yes" value="yes25" name="question"><br>
      <label for="no">No!</label><input type="radio" id="no" value="no" name="question">
      <br/>
      First Name: <input type="text" id="first_name" />

    </div>

    <div style='color: green;' id='result'>
    </div>

</body>
</html>

【讨论】：