网页前端设计

一、lhgdialog框架介绍

lhgdialog是一功能强大的简单迷你并且高效的弹出窗口插件,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+

主要以iframe方式加载单独页面为主的弹出窗口，由其适用于后台管理和webOS类项目使用，独立的内容页更方便管理，页面的也不易受其它页面的影响，而且内容页可以是静态或动态的任何一种文件。

二、使用环境

在C#.net下的调用

原本是想利用#top号来实现点击分页后自动定位到锚标的地方，因为顶部到列表表格还有100多像素。定位就比较方便，但是另一个问题也来了，就是点击事件修改后关闭时没办法调用到刷新页面事件。这个BUG也是找了很久才发现的。没有别的办法只能去掉分页里面的#号了。这样修改后才能刷新页面。

列表页面如(list.aspx)

<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/lhgdialog.min.js"></script>
<div id="top">
<a href="javascript:;" onclick="opendg(660,300,'edit.aspx?id=1','修改','location.replace(location.href)')">修改</a>
</div>

经过包装的dialog弹窗口

//弹出窗口
function opendg(w, h, url, wtitle,fun) {
    var ws = "width:";
    var hs = "height:";
    if (w == null && h == null)
    {
        w = "";
        h = "";
    }
    //判断是不是url简单的以【.】判断
    if (url.indexOf(".") != -1)
        url = "url:" + url;
    $.dialog({
        id: "open_dialog",
        lock: true,
        title: wtitle,
        content: url,
        width: w,
        height: h,
        max: false,
        min: false,
        close: function (){
        	//关闭时执行的JS或方法
        	if (fun != "")
               eval(fun);
        }
    });
}

三、使用时注意的一些小事项

在最后一层弹窗口时不要添加框架的JS不然关闭时会关闭遮罩层的效果。

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)