Question

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 href="abc.php">link to page B  </a> 

I have this in page 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.

Answer 1

You can make a javascript function on pageA as below

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

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

<div>
//code for form of page B

</div>