How to create pop up window using jquery ui dialog

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.

Do you use Phonegap? If so you can use Childbrowser phonegap plugin to achieve that feature, see also stackoverflow.com/questions/5101665/… — Nelson Benítez León
– Nelson Benítez León, Commented Oct 2, 2012 at 10:26

GBD · Accepted Answer · 2012-10-02 16:10:36Z

4

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>

edited Oct 2, 2012 at 16:10

answered Oct 2, 2012 at 10:25

GBD

16k2 gold badges49 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ATZ Over a year ago

thx a lot. It works but I have this problem. After submitting the form, it should reload the page B. But page B doesn't re-load within the popup window but show in new normal window. How to make page B to be in pop up window even after reloading? Thank a lot.

GBD Over a year ago

see edited my answer to resolve your problem.you need to load pageB into iframe.

Collectives™ on Stack Overflow

How to create pop up window using jquery ui dialog

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related