javascript 打开一个新页面作为模态窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19123240/
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
Open a new page as modal window
提问by J?cob
I have the following code, how can I open another page as modal window popup if row exist?
我有以下代码，如果行存在，如何打开另一个页面作为模态窗口弹出窗口？
function editLesson(){
var row = $('#dg').datagrid('getSelected');
if (row){
// would like to open another page as modal window
}
}
Any help is highly appreciable.
任何帮助都是非常可观的。
回答by kasper Taeymans
you could use fancybox plugin. it's a really great plugin. http://fancybox.net/(mind fancybox 2 is out too)
你可以使用fancybox插件。这是一个非常棒的插件。 http://fancybox.net/（注意fancybox 2 也出来了）
http://jsfiddle.net/kasperfish/5EV8r/109/
http://jsfiddle.net/kasperfish/5EV8r/109/
$.fancybox('hello');
you also can load iframes in a fancybox (modal) window http://jsfiddle.net/kasperfish/5EV8r/110/
您还可以在fancybox（模态）窗口中加载 iframe http://jsfiddle.net/kasperfish/5EV8r/110/
$.fancybox([
'url'//url to your page
], {
'padding' : 10,
'type' : 'iframe',//set type to iframe
'overlayOpacity' : 0.7,
'overlayColor' : 'black',
'speedIn' : 900,
'speedOut' : 400,
'width' : '70%',
'height' : '50%'
});
回答by BurakS
You can use JQuery Dialog
您可以使用 JQuery 对话框
as described here:
如此处所述：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
