• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2744
  • Last Modified:

Modal Dialog implementation using JQuery

I need to open a page as a Modal Dialog using Jquery .For Example: I have 2 pages say, Parent.aspx & Child.aspx, I need to open child.aspx in a modal dialog using JQuery when i click on a button/link in the Parent.aspx.
0
jagssidurala
Asked:
jagssidurala
  • 7
  • 4
  • 3
  • +2
1 Solution
 
Michel PlungjanIT ExpertCommented:
So go to jquery UI dialog
http://jqueryui.com/demos/dialog/
0
 
jagssiduralaAuthor Commented:
Can you please give me any sample code/ links. In the above demo opens a div in same page but my requirement is to open a new child page in a parent page.
0
 
malikirfan28Commented:
You can use the following simple Javascript to open a window as dialog.

window.showModalDialogURL, FormObject, "dialogWidth:300px; dialogHeight:201px; center:yes");

Here is the complete example.

<html>
<head>
<title></title>
<script type="text/javascript">
function openDialog(form) {
    var result = window.showModalDialog("http://www.java2s.com", form, "dialogWidth:300px; dialogHeight:201px; center:yes");
}
</script>
</head>
<body>
<form name="sample" action="#" onsubmit="return false">  

    <input type="button" value="Send to Dialog" onclick="openDialog(this.form)" />
</form>
</body>
</html>

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
jagssiduralaAuthor Commented:
Yes i am already using this code. But i want open a child page using jquery as URL should be hidden and smoothness.


0
 
Steve KrileCommented:
I happend to be a fan of the Jquery Tools add ons.  There is an overlay element like what you are looking for.  http://flowplayer.org/tools/demos/overlay/index.html

However, your real question is how to load content from one page into an HTML element on another page.  For that you need to use flavor of .load().

Here is a simple example using jquery tools.

Page 2 (loaded content called Page2.html):
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
	Hi there.  I am the second page.
</body>
</html>

Open in new window


And the main page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>


<title>Untitled Page</title>
<style>
	html {font-family: Arial;}
	 /* the overlayed element */
	 .simple_overlay {

		/* must be initially hidden */
		display:none;

		/* place overlay on top of other elements */
		z-index:10000;

		/* styling */
		background-color:#fff;

		width:675px;
		min-height:200px;
		border:1px solid #666;

		/* CSS3 styling for latest browsers */
		-moz-box-shadow:0 0 90px 5px #000;
		-webkit-box-shadow: 0 0 90px #000;
	}
</style>

	<a href="#" id="loader">Click to Open Overlay</a>
	<div class="simple_overlay">

	</div>
</head>
<body>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
    	//wire up the overlay with an onBeforeLoad method using the .load() method to fetch the
    	//second page of information and put it in the overlay element
		$(".simple_overlay").overlay({
			onBeforeLoad: function() {
				this.getOverlay().load("Page2.html")
			}
		});

		//wire up the click to trigger all the excitement
		$("#loader").click(function(e){
			e.preventDefault();
			//do not get confused with this .load() call.  This is a function that is
			//a part of the jquery tools OVERLAY element.  It is not the same load()
			//that is built in to jquery itself.
			$(".simple_overlay").data("overlay").load()
		})
    })

</script>
</body>
</html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
I'll find you an example when I get to a pc.
0
 
jagssiduralaAuthor Commented:
@skrile: your example is not working and link provided is to display a content with in the same page itself.

@mplungjan: Thank you. Could you please suggest me ASAP.

0
 
Steve KrileCommented:
Actually, my example works if you create a second page called Page2.html.   I never post examples that don't function.  I have tested them on my machine.

0
 
jagssiduralaAuthor Commented:
i am working on .aspx pages.
0
 
Steve KrileCommented:
I understand.  As do I.  But for these forums, offering you .HTML examples is the most effective way to communicate concepts because you can try them on your desktop.  Then, once you have proof of concept you can implement them in your environment.  Page2.html could just as easily be child.aspx.
0
 
Michel PlungjanIT ExpertCommented:
0
 
jagssiduralaAuthor Commented:
Just my requirement to develop modal dialog(which opens a child page in parent page) in jquery with asp.net as web technology and ajax can not be used as per my requirement.

i have seen some of the jquery popups like thickbox modal dialog. we can apply this for anchor tag href only and cannot write JS function like javascript show modal dialog.

see the link: http://pixeline.be/experiments/ThickboxToJqModal/

in above example calling a child page in href. but me requirement is to write a js function in that i use jquery show modal dialog like js window.showmodaldialog to open a child page.

0
 
Michel PlungjanIT ExpertCommented:
Sorry. Nothing in the above post made any sense to me.

If you need to use showModalDialog, use showModalDialog...
0
 
jagssiduralaAuthor Commented:
Thank you very much to all for spending time to solve my problem but the solution not suitable for my req.

Thanks and Regards
Jagssidurala
0
 
jagssiduralaAuthor Commented:
This is the only method i implemented with jquery
0
 
Ravindra RewatkarCommented:
I have also same problem window.showmodeldialog is not working all browser so which is alternative function
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 7
  • 4
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now