Using ASP.NET form on Fancybox popup to make login window
Many advanced web-sites these days use JQuery popups for their login windows. I think it's cute and convinient: no need to make a separate login page from where the user can login to the web-site. Just a small popup with login and password fields and submit button.
For many years JQuery-based FancyBox is my choice for web popups. It's very simple to install and run to show images, static text. YouTube videos and IFRAMEs. I had a little difficulty using it to show a proper ASP.NET form however. All .NET controls need to be inside the <form> server-side tag, we all know that. At the same time FancyBox stubbornly moves the actual content pane to show in a popup out of the <form> tag.
There are a couple of articles on the Internet about this problem and how to tackle it. For example, here is the detailed explanation and a very useful advice how to change the FancyBox javascript file to make it work. This works brilliantly for version 1.3.4, but I have already installed and intended to use more recent version - 2.1 (dated end of August 2012), hot off the press.
It looked like the same recipe does not work for this version, so it took some time to figure out how to make it work for 2.1.
What I've done was to replace this piece of code:
/*
if (!this.overlay) {
$.extend(this, {
overlay : $('<div class="fancybox-overlay"></div>').appendTo( obj.parent ),
margin : D.height() > W.height() || $('body').css('overflow-y') === 'scroll' ? $('body').css('margin-right') : false,
el : document.all && !document.querySelector ? $('html') : $('body')
});
} */
with this one:
if (!this.overlay) {
$.extend(this, {
overlay : $('<div class="fancybox-overlay"></div>').appendTo('form'),
margin : D.height() > W.height() || $('form').css('overflow-y') === 'scroll' ? $('body').css('margin-right') : false,
el : document.all && !document.querySelector ? $('html') : $('form')
});
}
From Umbraco point of view (although this problem is unlikely to be specific to Umbraco, I think it's general to many ASP.NET CMS) I just used <form runat="server"> tag starting immediately after <body>.
The only thing that I haven't yet resolved is using ScriptManager and AJAX on the popup login box. It actually works, but with a major issue: the popup box shows up only after second click on the link. The first click on the link just dims the display, but does not show anything. This is probably some conflict between ASP.NET ScriptManager and JQuery/FancyBox, but at this stage I was comfortable to leave this as it is. The feature of displaying the error if the user entered wrong credentials can be realized using simple JSON-call to the web-service, that is - without server-side programming. And if the username/password are correct, just redirect the user with good old Response.Redirect to some user profile page or whatever is necessary.
RECENT BLOG ENTRIES
Bigcommerce template editing
How to change content in BigCommerce.com templates: guide for a complete newbie.
Read full story
What if Fancybox does not work at all
If Fancybox library does not work, this might be due to the conflicts with other JS libraries and not the syntax error.
Read full story
Fancybox with ASP.NET form on Umbraco
Using ASP.NET form on Fancybox popup to make login window
Read full story
The author of this web-site supports WWF . Please do your part in saving our planet!
Alex’s expertise in developing and maintaining web applications has been invaluable to the College – J. Wittersheim, Director of Information Management and Funding, Bury College
