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

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

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

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

编辑＃3

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

编辑＃2

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

 #dialog { display:none; }  

编辑〜尝试＃1

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

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

知道这段代码有什么问题吗？ ..也许我的jquery包括电话？

        //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'); });   #dialog { display:none; }    
Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display here when finished.
 
 
This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
  Save me! 
 Open Dialog   

Answer 1

好的，好的

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

HTML：

 
Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display here when finished.
 
 
This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
  Save me! 
 Open Dialog 

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 

输入正确的URL，它将起作用。

加成：

问题在于你第二次调用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上的解决方案：

          Poll 
 
Question?
 Yes!
 No! 
 First Name: