Geeks With Blogs
Stuff I do my notepad

You can upload this example from here (I had made some small modification to the original code but it should be easy to understand. This solution uses just HTML and jQuery):  http://cid-4fb5a48846336376.skydrive.live.com/self.aspx/.Public/SimpleModal.zip

 

I needed a very simple solution that allows me to show centered modal div. ASP.NET Ajax Control Toolkit has modal popup (http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx). And also there are many of jQuery examples. But I needed something very simple and something that I have full control over.

Basically any modal popup has a div that overlays whole page with z-index set to very big number – this prevents user from interacting with the page and on the top of this div there is usually centered div that prompts user do do something (or it can be just “Wait loading...” bar that appears during callback).

Here is how the final result should look like.

OK here is the code:

//* simple modal function
new function($)
{
    $.fn.showModal = function() 
    {
      //* create modal if not exists
        if ($('#modal').length == 0)
        {
            $('<div id="modal" style="top:0px; left:0px; position:fixed; z-index:10000; width:100%"></div>').appendTo(document.body);
            //* check if IE6 because it doesnt support fixed position
            if ($.browser.msie && $.browser.version == "6.0")
               $('#modal').css({ 'position': 'absolute', 'height': $(document).height() });
            else
               $('#modal').css({ 'position': 'fixed', 'height': '100%' });
        }
 
        //* show modal div
        $('#modal').show();
 
        //* center popup div
        //* set focus to popup div to prevent user from clicking button again by hitting Enter key
        //* you can set focus to OK or Cancel button on the popup div
        $(this)
            .css({ 'top': '150px', 'left': ($(window).width() / 2 - $(this).width() / 2), 'z-index': '10001' })
            .slideDown()
            .focus();
    }
}(jQuery);
 
new function($)
{
    $.fn.hideModal = function() 
    {
        $(this).slideUp();
        $('#modal').hide();
    }
}(jQuery);

Css style for modal div:

#modal
{  
    position:absolute;  
    z-index:10000;  
    background-color:gray;
    filter:alpha(opacity=35);
    opacity:0.35;
    display:none

As you can see modal div created dynamically as we needed it. Position fixed guaranties that overlay div will be there if we scroll the page. If it's IE6 we set div position to absolute and height to document height. This is probably not the best solution. We pretty safe can set div position to absolute and height to document height.

To show modal (“divSimplePopup” is actual popup div we want to be on the top):

$('#divSimplePopup').showModal();

To hide modal:

$('#divSimplePopup').hideModal();
To use it set on click event like this:
<asp:Button ID="btnShowModalDiv" runat="server" Text="Show Modal Div" 
            OnClientClick="$('#divSimplePopup').showModal(); return false;" 
            CssClass="button_popup" />

or set on click event on page load:

$(document).ready(function() 
{
    $('#<%=btnShowModalDiv.ClientID %>').click(function() { $('#divSimplePopup').showModal(); return false; });
});

or in the code behind

btnShowModalDiv.Attributes.Add("click", "$('#divSimplePopup').showModal(); return false;");

Here is how HTML markup looks like:

<asp:Button ID="btnShowModalDiv" runat="server" Text="Show Modal Div" CssClass="button_popup" 
            OnClientClick="$('#divSimplePopup').showModal(); return false;" />
        
<div id="divSimplePopup" class="popup" style="display: none; width: 350px;">
    <div class="container">
        <div class="header headerdraggable">
            <asp:Label ID="lblPopupHeader" runat="server" CssClass="msg" Text="Simple Popup Header" />
            <asp:LinkButton ID="lbtnHideModal" runat="server" CssClass="close" 
                            OnClientClick="$('#divSimplePopup').hideModal(); return false;" />
        </div>
        <div class="bodyAndFooter">
            <div class="body" style="height: 100px; overflow: auto;">
                <asp:Label ID="lblSimplePopupBody" runat="server" Text="Simple Popup Body" />
            </div>
            <div class="footer">
                <asp:Button ID="btnOK" runat="server" Text="OK" Width="40px" CssClass="button_popup" />
                <asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="button_popup"
                            OnClientClick="$('#divSimplePopup').hideModal(); return false;" />
            </div>
        </div>
    </div>
</div>

You can add different effect for the modal div to fade in or out. I think this is unnecessary.

Let me know if I missed something to make it better or simpler.

I took some inspiration from this post “Simple jQuery Modal Window Tutorial” (http://www.queness.com/post/77/simple-jquery-modal-window-tutorial). Also I used styles from for the Popup Window from Matt Berseth's blog (http://mattberseth.com/blog/2007/11/yui_styled_tip_of_the_day_dial.html). Unfortunately he has not blogged for a while. But there a lot of good stuff over there (I like his TabContainer Themes http://mattberseth.com/blog/2008/04/ajaxcontroltoolkit_tabcontaine.html)

Happy programming!

You can upload this example from here (I had made some small modification to the original code but it should be easy to understand. This solution uses just HTML and jQuery):  http://cid-4fb5a48846336376.skydrive.live.com/self.aspx/.Public/SimpleModal.zip

Technorati Tags: ,
Posted on Sunday, December 20, 2009 2:27 PM jQuery , ASP.NET | Back to top


Comments on this post: Jquery Simple Modal plugin

# re: Jquery Simple Modal plugin
Requesting Gravatar...
Is there any working example of this? I tried it but without success, probably because I can't port this ASP code.

What I want to do is to have simple popup on click like on http://www.lostpixels.nl/staf/ (click "Send this page to a Friend" on the right sidebar to see what I mean).

Problem is that this is old JavaScript and I want to use jQuery because of other functions I'll use. Other jQuery functions for this are very big and I don't need something complicated, just as lightweigth as possible.

Thanks in advance.
Left by Milan on Jan 31, 2010 5:28 PM

# re: Jquery Simple Modal plugin
Requesting Gravatar...
I had uploaded small example over here http://cid-4fb5a48846336376.skydrive.live.com/self.aspx/.Public/SimpleModal.zip

Hope it helps. I needed this small plug-in for exactly same reason – small and easy to understand. Let me know if it works for you.
Left by vladimirl on Jan 31, 2010 9:45 PM

# re: Jquery Simple Modal plugin
Requesting Gravatar...
I did a quick test and it works now! Thank you for this. I'll post a comment with final results when I finish it.

BTW, under which license you released this? I want to use it in plugin for WordPress which will be under GPL so I need to know can I use your work in it.
Left by Milan on Feb 01, 2010 6:17 PM

# re: Jquery Simple Modal plugin
Requesting Gravatar...
No problem. Use it as you need. These postings are provided "AS IS" with no warranties, and confer no rights.
Left by vladimirl on Feb 01, 2010 8:06 PM

# re: Jquery Simple Modal plugin
Requesting Gravatar...
This is a great sample.

I added the "fast" duration option to the slideDown() and slideUp() functions. Looks better on my site.

Thank you.
Left by JimmyZ on Mar 14, 2010 3:50 PM

# re: Jquery Simple Modal plugin
Requesting Gravatar...
There is a small problem and not sure there is already any somution to this.
If you are opening using this showModal from an existing div which was also opened using showModal. Then if you hide the topmost with hideModal if takes the background page to editable/clickable and looses the state of the background page..

Any help would be highly apprecitaed if that's possible to if there is any other showModal already opened from hideModal.
Left by Pawan on Nov 04, 2010 4:28 AM

# re: Jquery Simple Modal plugin
Requesting Gravatar...
I stumbled upon this post while googling for a simple popup solution. It works great - appreciate it...but looks like a postback caused within the popup closes the popup and returns back to the base form. is there a way to handle this pls?
Left by prasad on Feb 17, 2011 7:55 AM

# re: Jquery Simple Modal plugin
Requesting Gravatar...
How can I pass value from modal popup to main page
Left by Murari on Jan 11, 2012 4:31 PM

# re: Jquery Simple Modal plugin
Requesting Gravatar...
Creo que mas simple no se puede, justo lo que necesitaba, gracias!! =D Excelente post!!
Left by Daniel on May 25, 2012 5:27 PM

# re: Jquery Simple Modal plugin
Requesting Gravatar...
Using this popup i am getting an error in IE8. Object doesn't support this property or method.

When i tested this in firebug, it shows error in line
$('divpopupId').hideModal()
and it shows this is not a function.
Any idea how to fix this?
Left by sooraj on Jun 05, 2012 3:06 PM

# re: Jquery Simple Modal plugin
Requesting Gravatar...
Awesome example. Works great!!
Thanks for sharing!!
Left by JoseG on Nov 08, 2012 2:34 PM

# re: Jquery Simple Modal plugin
Requesting Gravatar...
It works for me..!!! Great Jobs!
Thanks!
Left by X-Men on Apr 16, 2013 4:50 AM

# re: Jquery Simple Modal plugin
Requesting Gravatar...
It works for me..!!! Great Jobs!
Thanks!
Left by X-Men on Apr 16, 2013 4:50 AM

# re: Jquery Simple Modal plugin
Requesting Gravatar...
it's not working in aspx page when i'm inheriting the page from a master page. The pop up box is grayed & not clickable. But if i use only aspx page(not inheriting from master page) then it's working fine.
Please help me ...
Left by TempExpt on Sep 23, 2013 4:11 AM

Your comment:
 (will show your gravatar)


Copyright © vladimirl | Powered by: GeeksWithBlogs.net | Join free