asked on

jquery dialog popup

I have an html code called HTMLA with and HREF to HTMLB(<a href="HTMLB.html">See B</a>)

HTMLB contains a jquery dialog box as per the below)

My challenge is that when I press on the URL to show the dialog of HTMLB, HTMLA screen disappears and only dialog box of HTMLB is displayed.

How can I superimpose HTMLB on HTMLA? In other words, both HTMLA and HTMLB must be displayed (similar to opening HTMLB as a popup window)

HTMLA
<a href="HTMLB.html">See B</a>

HTMLB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/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>

Julian Hansen

Here is a good start

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
	$( "#dialog" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        Cancel: function() {
          $('#dialog').dialog( "close" );
        }
      },
      close: function() {
      }
    });
	$('.open-dialog').click(function(e) {
		e.preventDefault();
		$( "#dialog" ).dialog("open");
	});
});
</script>
</head>
<body>
<div>
	Your HTMLA code goes here <a href="#" class="open-dialog">Open Dialog</a>
</div>
<div id="dialog" title="Basic dialog" style="display: none">
	<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>

Open in new window

More examples here http://jqueryui.com/dialog/#default

Errol Farro

ASKER

I really need HTMLA and HTMLB to be two separate files. They cannot be combined in one for technical reasons. Is this possible ?

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial