作为模态窗口打开一个新页面答案

【问题标题】：Open a new page as modal window作为模态窗口打开一个新页面
【发布时间】：2013-10-01 18:23:41
【问题描述】：

我有以下代码，如果存在行，我如何打开另一个页面作为模式窗口弹出窗口？

 function editLesson(){
            var row = $('#dg').datagrid('getSelected');
            if (row){
             // would like to open another page as modal window

            }
        }

任何帮助都是非常值得赞赏的。

【问题讨论】：

window.open (w3schools.com/jsref/met_win_open.asp) 除非“模态”是指当前窗口内的增强弹出窗口，您可以使用 jqueryui.com/dialog 包含包含您的其他页面的 iframe。
@Bucky24 jqueryui.com/dialog 是否有模式弹出窗口可以打开另一个页面？
我自己没有使用过，但看起来你可以让它弹出一个包含任意 html 的模式，在这种情况下，你可以有一个 iframe，它的 src 设置为你的任何其他页面想要加载。

标签： javascript jquery jquery-easyui

【解决方案1】：

你可以使用 fancybox 插件。这是一个非常棒的插件。 http://fancybox.net/（注意fancybox 2 也出了）

http://jsfiddle.net/kasperfish/5EV8r/109/

$.fancybox('hello');

您还可以在花式框（模态）窗口中加载 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%'

    });

【讨论】：

【解决方案2】：

您可以使用 JQuery 对话框

如此处所述：

   <!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>

http://jqueryui.com/dialog/

【讨论】：

所以在<div id="dialog" title="Basic dialog"> 里面我应该调用一个iframe？
不，可以隐藏div。