1.框架用的是.net MVC,Index页面如下所示:

 @{
Layout = "~/Views/Shared/_CustomerLayout.cshtml";
ViewBag.Title = "Index";
}
<script> function LoadContent(contenturl) {
$("#rightcontent").load(contenturl);
} </script>
<div class="clearfix">
<div id="leftmenu" class="v_leftMenu">
@{Html.RenderPartial("Menu");}
</div>
<div id="rightcontent" class="v_rightContent">
@{Html.RenderPartial("Content");}
</div>
</div>
_CustomerLayout.cshtml中的整体布局如下:
<body>
@*头部*@
<div class="navbar-inverse v_header"> </div> @RenderBody() @*底部*@
<div class="ft"> </div>
</body>

2.问题描述:后台用的easyui框架,我发现每点击一个弹框,easyui就会自动生成如下代码:

easy ui 弹框叠加问题-LMLPHP

当点击多次,弹框会叠加

easy ui 弹框叠加问题-LMLPHP

3.解决方法:

在Index页面中的load方法之前,将这些弹框清除掉即可。

 @{
Layout = "~/Views/Shared/_CustomerLayout.cshtml";
ViewBag.Title = "Index";
}
<script> function LoadContent(contenturl) {
//清除之前的弹框
$('.panel').remove();
$('.window-shadow').remove();
$('.window-mask').remove();
$("#rightcontent").load(contenturl);
} </script>
<div class="clearfix">
<div id="leftmenu" class="v_leftMenu">
@{Html.RenderPartial("Menu");}
</div>
<div id="rightcontent" class="v_rightContent">
@{Html.RenderPartial("Content");}
</div>
</div>

之前我以为是Html.RenderPartial的原因,总是顺着这个方向找,结果没有找到;后来经提醒,才恍然大悟,原来是easyui根据页面中easyui-dialog自动生成弹框,生成的弹框在rightcontent之外,所以点击左侧菜单,rightcontent重新加载,但是并不会将弹框清除掉。

easy ui 弹框叠加问题-LMLPHP

感悟:easyui自己不是太熟,还是需要多研究多练习,加油!

05-11 19:39