如何使用jquery ui对话框创建弹出窗口

I have a link in my page A which will bring user to page B. I want page B to pop up without affecting my page A, using jquery ui dialog like how window.open() function does (eg: <a href="" onclick="window.open('abc.php','', 'width=100, height=100, location=no, menubar=no, status=no,toolbar=no, scrollbars=no, resizable=no'); return false"> ABC </a>
I have this in page A:

我在页面A中有一个链接，它将把用户带到页面B.我希望页面B弹出而不影响我的页面A，使用jquery ui对话框，如window.open（）函数如何（例如： ABC 我在第A页中有这个：

<a href="abc.php">link to page B  </a>

I have this in page B:

我在B页中有这个：

<script>
    $(function() {
        //$( "#dialog" ).dialog();
        $( "dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog" ).dialog({
            height: 500,
            width: 740,
            modal: true
            });
    });
    </script>
<div id="dialog">
//code for form of page B

</div>

My problem is that the content is displayed inside the dialog box but it's not pop up window. The dialog just display on browser's window as dialog box. Basically, page A is replaced by page B. but i want page B to pop up when user click a link on page A.
Anyone know how to do? Thank a lot.

我的问题是内容显示在对话框内，但它不是弹出窗口。该对话框仅在浏览器窗口中显示为对话框。基本上，页面A被页面B替换。但是当用户单击页面A上的链接时，我想要弹出页面B.任何人都知道该怎么做？非常感谢。

1 个解决方案

#1

You can make a javascript function on pageA as below

您可以在pageA上创建一个javascript函数，如下所示

function showUrlInDialog(url){
  var tag = $("<div></div>");
  $.ajax({
    url: url,
    success: function(data) {
      tag.html(data).dialog({modal: true}).dialog('open');
    }
  });
}

Second way to load your page into iframe

将页面加载到iframe的第二种方法

function showUrlInDialog(url){
  var tag = $("<div></div>");
  tag.html('<iframe style="border: 0px; " src="' + url + '" width="100%" height="100%"></iframe>').dialog({modal: true}).dialog('open');
  
}

Now call this function on your anchor tag as below

现在在锚标记上调用此函数，如下所示

<a href="#" onclick="showUrlInDialog('abc.php'); return false;">link to page B</a>

On page B only keep your form or html code

在页面B上只保留您的表单或HTML代码

<div>
//code for form of page B

</div>

#1