Question

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

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

有人可以推荐这些代码参考吗？感谢

编辑＃3

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

编辑＃2

我更新了head block以包含缺少的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>

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

Dialog开始隐藏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');
});

Answer 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

输入正确的网址即可。

<强>此外：

问题在于你第二次调用jQuery：

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

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

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

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

3 个答案: