jQuery 推荐简单的jquery对话框示例？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24917243/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Recommendation for simple jquery dialog example?
提问by Gene Bo
Searching all over for the keywords "simple jquery dialog example" - with all the answers out there, I have not seen any simple and meaningful example in a succinct standalone .html document . Even downloading several full books on jQuery, I didn't see any such an example.
到处搜索关键字“简单的 jquery 对话框示例” - 有了所有的答案，我还没有在一个简洁的独立 .html 文档中看到任何简单而有意义的示例。即使下载了几本关于 jQuery 的完整书籍，我也没有看到任何这样的例子。
The examples I did find are for a dialog that shows an alert message "Hello World" .. not very useful for interaction. I think the real world example would be something that captures input and sends it back to the page without requiring to post back to the server. The server post can be a subsequent step.
我找到的示例是用于显示警报消息“Hello World”的对话框......对交互不是很有用。我认为现实世界的例子是捕获输入并将其发送回页面而不需要回发到服务器的东西。服务器发布可以是后续步骤。
Can anyone recommend a code reference along these lines? Thanks
任何人都可以推荐这些方面的代码参考吗？谢谢
EDIT #3
编辑 #3
I have pasted in a solution with a fresh post below. It is a completely self-contained file, with ready-to-go includes. It's working for me.
我在下面粘贴了一个新帖子的解决方案。它是一个完全独立的文件，带有现成的包含。它对我有用。
EDIT #2
编辑#2
I updated the head block to contain the missing css. The dialog content is now not being shown, but still the dialog box is not opening .. and no errors in console.
我更新了 head 块以包含缺少的 css。现在没有显示对话框内容，但对话框仍然没有打开......并且控制台中没有错误。
<style>
#dialog {
display:none;
}
</style>
EDIT ~ ATTEMPT #1
编辑 ~ 尝试 #1
Based on the answer from @rob-schmuecker , I tried the following code below. I see it work on jsFiddle, but my implementation is not working. In my browser the console doesn't show any errors. But there are two problems I'm seeing:
根据@rob-schmuecker 的回答，我尝试了下面的代码。我看到它在 jsFiddle 上工作，但我的实现不起作用。在我的浏览器中，控制台没有显示任何错误。但是我看到了两个问题：
- dialog-box div content loads directly into the page
- clicking the load dialog button doesn't work
- 对话框 div 内容直接加载到页面中
- 单击加载对话框按钮不起作用
Any idea what is wrong with this code? .. is it perhaps my jquery include calls?
知道这段代码有什么问题吗？.. 是不是我的 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>
采纳答案by Gene Bo
I appreciate everyones' answers - and I saw them all work online in JsFiddle and jqueryui.com. For what I was going after, so far as I can tell, here's the most concise solution I was able to get going, using all remote includes and based on the solution at java2s.com:
我感谢大家的回答——我看到他们都在 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>
回答by Rob Schmuecker
OK Here goes
好的 来了
Demo:http://jsfiddle.net/robschmuecker/9z2ag/1/
演示：http: //jsfiddle.net/robschmuecker/9z2ag/1/
HTML:
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 starts off hidden with CSS:
对话框以 CSS 隐藏开始：
#dialog {
display:none;
}
Then we do some Javascript:
然后我们做一些 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');
});
回答by Yaakov Ainspan
The reason it isn't working is because your calls to jQuery and jQuery UI are like this:
它不起作用的原因是因为您对 jQuery 和 jQuery UI 的调用是这样的：
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
But the URL to load it from is:
但是加载它的 URL 是：
https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
Put in the correct URL and it will work.
输入正确的 URL，它将起作用。
ADDITION:
添加：
The problem is in your second call to jQuery:
问题出在您对 jQuery 的第二次调用中：
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js
Besides for the fact that the jQuery is loaded from https, there is no jquery.js, it is jquery.min.js.
除了jQuery是从https加载的，没有jquery.js，它是jquery.min.js。
