Popup, and main page get refresh


I want to do something like this. fancy box style login panel when clicked on login and user enter username/password , finally the fancybox style popup closes and the parent window refreshed (session value)
Who is Participating?

You can create your login form in a div in desired design. Make this div as hidden when page loads. On click of SignIn, show this div by setting its positions on the screen. Once user enter login and password before clicking submit button, login info gets posted to the server with page refresh and then you can do backend coding to handle login and sessions..

make sense ?
Try using modal-dialogue of JQuery:

Download a simple UI from:

And use the attached code..

You can add a username and password box to the dialogue (in div).

Best regards.

<!doctype html>
<html lang="en">
	<title>jQuery UI Dialog - Basic modal</title>
	<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
	<script type="text/javascript" src="../../ui/ui.core.js"></script>
	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
	<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
	<script type="text/javascript" src="../../external/bgiframe/jquery.bgiframe.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<script type="text/javascript">
	$(function() {
			bgiframe: true,
			height: 140,
			modal: true

<div class="demo">

<div id="dialog" title="Basic modal dialog">
	<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>

<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
	<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
		<input value="text input" /><br />
		<input type="checkbox" />checkbox<br />
		<input type="radio" />radio<br />
		</select><br /><br />
		<textarea>textarea</textarea><br />
</div><!-- End sample page content -->

</div><!-- End demo -->

<div class="demo-description">

<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.  To add a semi-transparent layer that dims out the page content behind the dialog, set the background color and opacity of the <code>overlay</code> option.</p>

</div><!-- End demo-description -->


Open in new window

sahanlakAuthor Commented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.