由于您是编码新手,我建议使用 jQuery 团队的 jQueryUI 库——其中包括.dialog()
能力(他们称之为“小部件”)。它的工作原理如下:
(1)包括 jQueryand你的 jQueryUI 库<head></head>
标签。请注意,您还必须为 jQueryUI 添加适当的 CSS 主题库(否则对话框将不可见):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
(2)在 HTML 中创建一个空 div,并将其初始化为对话框:
HTML:
<div id="myDlg"></div>
jquery:
$('#myDlg').dialog({
autoOpen:false,
modal:true,
width: 500,
height: 'auto'
});
(3)然后,当您准备好显示对话框时,将新数据插入到myDlg
div 在打开对话框之前:
$('#myDlg').html('<div>This will display in the dialog</div>');
$('#myDlg').dialog('open');
上面的内容允许您更改对话框的内容并每次使用相同的对话框 DIV。
工作示例如下所示:
jsFiddle Demo http://jsfiddle.net/8jp37ej9/
HTML:
<div id="myDlg"></div>
<div id="questiona" class="allques">
<div class="question">What is 2 + 2?</div>
<div class="answer">4</div>
</div>
<div id="questionb" class="allques">
<div class="question">What is the 12th Imam?</div>
<div class="answer">The totally wacky reason why Iran wants a nuclear bomb.</div>
</div>
jQuery:
var que,ans;
$('#myDlg').dialog({
autoOpen:false,
modal:true,
width: 500,
height: 'auto',
buttons: {
"See Answer": function(){
$('#myDlg').html(ans);
$('.ui-dialog-buttonset').next('button').hide();
},
"Close": function(){
$('#myDlg').html('').dialog('close');
}
}
});
$('.allques').click(function(){
que = $(this).find('.question').html();
ans = $(this).find('.answer').html();
$('#myDlg').html(que).dialog('open');
});
资源:
如何使用 PopUp 插件 https://stackoverflow.com/questions/18797855/how-to-use-plugins-for-popup/18797998#18797998
http://jqueryui.com/dialog/ http://jqueryui.com/dialog/
http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/
jQuery UI 对话框 - 关闭后无法打开 https://stackoverflow.com/questions/366854/jquery-ui-dialog-box-close-function
动态改变 jQueryUI 对话框按钮 https://stackoverflow.com/questions/17013222/dynamically-changing-jqueryui-dialog-buttons
jQuery UI 对话框 - 关闭事件时出现问题 https://stackoverflow.com/questions/865998/jquery-ui-dialog-problem-with-event-on-close