最终效果：
加载前效果：
加载后效果：
具体实现：
1：WebUserControl.ascx文件
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<div id=\'aaa\'>
<h3>Basic Modal Dialog</h3>
<p>For this demo, SimpleModal is using this \'hidden\' data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).</p>
<p>Examples:</p>
<p><code>$(\'#basicModalContent\').modal(); // jQuery object; this demo</code></p>
<p><code>$.modal(document.getElementById(\'basicModalContent\')); // DOM</code></p>
<p><code>$.modal(\'<p><b>HTML</b> elements</p>\'); // HTML</code></p>
<p><a href=\'http://www.ericmmartin.com/projects/simplemodal/\'>More details...</a></p>
</div>
可以在后台添加耗时的代码，这样效果明显
如:
for (int i = 0; i < 1000000; i++)
{
for (int j = 0; j < 10000; j++)
{
}
}
2:编写WebService
[WebMethod]
public string aaa()
{
Page page = new Page();
UserControl ctl = (UserControl)page.LoadControl("~/WebUserControl.ascx");
page.Controls.Add(ctl);
StringWriter writer = new StringWriter();
HttpContext.Current.Server.Execute(page, writer, false);
return writer.ToString();
}
3.利用ajax请求：
完整代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="~/WebUserControl.ascx" TagPrefix="cc1" TagName="WebUserControl" %>
<%@ Register Src="~/WebUserControl2.ascx" TagPrefix="cc2" TagName="WebUserControl" %>
<%@ Register Src="~/WebUserControl3.ascx" TagPrefix="cc3" TagName="WebUserControl" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Dynamic Drive DHTML Scripts- Smooth Navigational Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="A folding DHTML menu tree with persistance feature, created via cookies." />
<meta name="keywords" content="DHTML, folding menu tree script, DHTML tutorial, free, JavaScript,persistance" />
<link rel="stylesheet" type="text/css" href="../ddincludes/mainstyle.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />
<link href="css/basic.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/basic_ie.css" rel="stylesheet" type="text/css" media="screen" />
<script src="jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="ddsmoothmenu.js">
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com/)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: \'h\', //Horizontal or vertical menu: Set to "h" or "v"
classname: \'ddsmoothmenu\', //class added to menu\'s outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: \'v\', //Horizontal or vertical menu: Set to "h" or "v"
classname: \'ddsmoothmenu-v\', //class added to menu\'s outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu-ajax",
orientation: \'h\',
classname: \'ddsmoothmenu\',
customtheme: ["#1c5a80", "#18374a"], //override default menu CSS background values? Uncomment: ["normal_background", "hover_background"]
contentsource: ["smoothcontainer", "smoothmenu.htm"] //"markup" or ["container_id", "path_to_menu_file"]
})
//function a(e)
//{
////e.preventDefault();
// $(\'#basic-modal-content\').modal();
//}
//$(document).ready(function () {
// debugger;
// $(\'#basic-modal input.basic, #basic-modal a.basic, #smoothmenu1 a.bisic\').click(function (e) {
// e.preventDefault();
// $(\'#basic-modal-content\').modal();
// });
//});
var role="管理员";
//var role="访客";
$(document).ready(function () {
//角色菜单配置
if(role=="管理员")
{
//debugger;
// $("a:contains(\'Folder 2\')").parent().remove();
}
/*
if(role=="访客")
{
}
*/
//事件注册
$(\'#basic-modal input.basic, #basic-modal a.basic,#smoothmenu1 a.bisic1\').click(function (e) {
$("#Loading").ajaxStart(
function()
{
$("#Loading").modal();
}
);
$.ajax({
type: "POST",
url: "WebService.asmx/aaa",
complete: function(msg) {
// Hide the loading progress .
$("#Loading").remove();
// Insert the returned HTML into the <div>.
$(\'.simplemodal-wrap\').html(msg.responseXML.text);
$(\'#aaa\').css("display","block");
}
});
});
$(\'#basic-modal input.basic, #basic-modal a.basic,#smoothmenu1 a.bisic2\').click(function (e) {
e.preventDefault();
//debugger;
//$(\'.simplemodal-wrap\').load(\'WebUserControl.ascx\');
//$("#simplemodal-container.simplemodal-wrap").prepend(\'<div id="aaa"><h3>Basic Modal Dialog</h3></div>\');
//debugger;
//$(\'#basic-modal-content\').modal();
$(\'#bbb\').modal();
});
});
</script>
</head>
<body>
<form id="form1" runat ="server" >
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.dynamicdrive.com/" class="bisic">Item 1</a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#" id="bisic" >Sub Item 1.1</a></li>
<li><a href="#" class="bisic1">Sub Item 1.2</a></li>
<li><a href="#" class="bisic2">Sub Item 1.3</a></li>
<li><a href="#" class="bisic">Sub Item 1.4</a></li>
<li><a href="#" class="bisic">Sub Item 1.2</a></li>
<li><a href="#" class="bisic">Sub Item 1.3</a></li>
<li><a href="#" class="bisic">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#" class="bisic">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#" class="bisic">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#" class="bisic">Sub Item 2.1.1</a></li>
<li><a href="#" class="bisic">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#" class="bisic">Sub Item 3.1.1.1</a></li>
<li><a href="#" class="bisic">Sub Item 3.1.1.2</a></li>
<li><a href="#" class="bisic">Sub Item 3.1.1.3</a></li>
<li><a href="#" class="bisic">Sub Item 3.1.1.4</a></li>
<li><a href="#" class="bisic">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#" class="bisic">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/%22%3EItem 4</a></li>
</ul>
</div>
<div id="Loading"><img src="ajax-loader13.gif" /></div>
<%--<cc1:WebUserControl runat="server" />
<cc2:WebUserControl runat="server" />
<cc3:WebUserControl runat="server" />--%>
<%--<div id="basic-modal-content">
<h3>Basic Modal Dialog</h3>
<p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).</p>
<p>Examples:</p>
<p><code>$(\'#basicModalContent\').modal(); // jQuery object; this demo</code></p>
<p><code>$.modal(document.getElementById(\'basicModalContent\')); // DOM</code></p>
<p><code>$.modal(\'<p><b>HTML</b> elements</p>\'); // HTML</code></p>
<p><a href=\'http://www.ericmmartin.com/projects/simplemodal/\'>More details...</a></p>
</div>--%>
<%-- <script src="js/basic.js" type="text/javascript" ></script>--%>
<script src="js/jquery.simplemodal.js" type="text/javascript" ></script>
</form>
</body>
</html>