搜索所有关键字“简单的jquery对话框示例” – 所有的答案在那里,我没有看到任何简单和有意义的例子在一个简洁的独立的.html文档.甚至下载几本关于jQuery的完整书,我没有看到任何这样的例子.
我找到的例子是一个对话框,显示一个警报消息“Hello World”..对交互不是很有用.我认为现实世界的例子将是捕获输入的东西,并将其发回到页面,而不需要发布回服务器.服务器帖子可以是后续步骤.
任何人都可以推荐这些代码参考？谢谢
编辑#3
我已经粘贴了一个解决方案,下面有一个新帖.它是一个完全独立的文件,随时可以包括.它为我工作
编辑#2
我更新了头块以包含缺少的css.对话框内容现在没有显示,但对话框仍然没有打开,控制台中没有错误.
<style>
#dialog {
display:none;
}
</style>
编辑〜ATTEMPT#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>
解决方法
OK这里
演示：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');
});
