一个简单的jQuery对话框示例推荐？

Question

一个简单的jQuery对话框示例推荐？

jqueryjquery-ui-dialog

16

寻找关键词“简单jquery对话框示例”的所有答案，但是没有看到任何简洁明了的独立.html文件的实用示例。即使下载了几本jQuery的完整书籍，也没有看到这样的示例。

我找到的示例是显示警报消息“Hello World”的对话框..对于交互来说并不是非常有用。我认为真实世界的示例应该是捕获输入并将其发送回页面，而无需返回服务器。服务器发布可以是后续步骤。

有人能否推荐一个类似这些的代码参考？谢谢

编辑＃3

我在下面粘贴了一个解决方案的新帖子。它是一个完全独立的文件，具有现成的包含文件。它对我有效。

编辑＃2

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

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

编辑-尝试＃1

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

dialog-box div内容直接加载到页面中
单击load dialog按钮无效

这段代码有什么问题吗？...也许是我的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>

- Gene Bo

3

http://jqueryui.com/dialog/#modal-form 正是你所要求的。 - Hanlet Escaño

你是指 prompt() 吗？ - Karl-André Gagnon

2

http://jsfiddle.net/robertrozas/VzJe8/112/ - Hackerman

#hanlet-escaño，#robert-rozas，#rob-schmuecker - 这些都是很好的例子，我喜欢看到它们被不同的方式处理..非常感谢！而且知道这些类型问题的代码示例可以直接在jqueryui.com网站上找到，这非常有帮助。 - Gene Bo

鉴于我看到了3个正确的答案，我不确定该标记哪一个为正确答案...因为我不想阻止其他人使用这些解决方案，每个都对我来说看起来都是100%正确的。我知道我只能将#rob-schmuecker标记为正确答案，但是...在这种情况下，我认为你明白我的意思。有关最佳实践的任何建议吗？ - Gene Bo

找到了另一个好的例子：http://www.java2s.com/Code/JavaScript/jQuery/Gettheinputvaluefromadialog.htm - Gene Bo

3个回答

4

原因在于您调用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.min.js而不是jquery.js。

- yaakov

我尝试了您建议的在“EDIT ~ ATTEMPT #1”下使用https作为头部脚本URL的方法，虽然我同意应该使用https，但这并没有解决问题，弹出窗口仍然无法显示。您是否能够通过添加https使该代码正常工作？ - Gene Bo

在我的 fiddle 上它能够正常工作，尽管由于某种原因，jquery ui 的样式表没有被加载。但是对话框除此之外都能够正常工作。 - yaakov

2

感谢大家的回答，我在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>

- Gene Bo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob Schmuecker · Accepted Answer

好的，开始翻译：

示例：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');
});