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.
.png)
.png)
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:
jQuery,
ASP.NET