关于弹出层的效果

Question

如何实现类似“论坛发帖那样的弹出层效果”发帖结束后 关闭层 并刷新页面

Answer 1

隐藏显示, + ruanat="server" 后台控制刷新

Answer 2

弹出层代码网上很多，弹出层之后点击关闭刷新页面，只需要点击事件中加入：window.location.href=window.location.href;

Answer 3

<style>
#otbl {
    border: 1px solid #8F8F8F;
    border-collapse: collapse;
}
#otbl td {
    border: 1px solid #8F8F8F;
    width: 60px;
    height: 30px;
}
#odiv {
    width:200px;
    height:100px;
    border: 2px solid #D0D0D0;
    background-color:#fff;
    position:absolute;
    display:none;
}</style>
<script type="text/javascript">
<!--
 var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
 var CancelBubble = function(e){
    var e = e || window.event;
    try{
        e.cancelBubble = true;
    }catch(ex){
        try{
            e.stopPropagation();
        }catch(e){}
    }
 } var getTarget = function(e){
    return e.srcElement || e.target;
 } var absPosition = function(element){
    var iTop = iLeft = 0;
    do{
        iTop += element.offsetTop;
        iLeft += element.offsetLeft;
    }while(element = element.offsetParent);
    return {'x': iLeft, 'y': iTop};
 }
 function showTip(e, obj){
        CancelBubble(e);
        var e = e || window.event
        var otarget = getTarget(e);
        $("odiv").style.display = "block";        with($("odiv").style){
            display="block";top=absPosition(otarget).y+"px";left=(absPosition(otarget).x+otarget.offsetWidth)+"px";
        }
        $("odiv").innerHTML = obj.innerText || obj.textContent;
        document.onmouseover = function(){
            $("odiv").style.display = "none";
            document.onmouseover = null;
        }
        $("odiv").onmouseover = function(e){
            var e = e || window.event;
            CancelBubble(e);
        } }
//-->
</script><table id="otbl">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2</td>
            <td onmouseover="showTip(event, this)">ws_hgo2 </td>
        </tr>
        <tr>
            <td>3</td>
            <td onmouseover="showTip(event, this)">ws_hgo3</td>
        </tr>
        <tr>
            <td>4</td>
            <td onmouseover="showTip(event, this)">ws_hgo4</td>
        </tr>
    </tbody>
</table><div id="odiv"></div>举个例子  不知道是不是你要的 

Answer 4

<script type="text/javascript">
    var docEle = function()
    {
        return document.getElementById(arguments[0]) || false;
    }    function openNewDiv(_id)
    {
        var m = "mask";
        if (docEle(_id)) document.body.removeChild(docEle(_id));
        if (docEle(m)) document.body.removeChild(docEle(m));        //mask遮罩层        var newMask = document.createElement("div");
        newMask.id = m;
        newMask.style.position = "absolute";
        newMask.style.zIndex = "1";
        _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
        _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
        newMask.style.width = _scrollWidth + "px";
        newMask.style.height = _scrollHeight + "px";
        newMask.style.top = "0px";
        newMask.style.left = "0px";
        newMask.style.background = "#33393C";
        newMask.style.filter = "alpha(opacity=40)";
        newMask.style.opacity = "0.40";
        document.body.appendChild(newMask);        //新弹出层        var newDiv = document.createElement("div");
        newDiv.id = _id;
        newDiv.style.position = "absolute";
        newDiv.style.zIndex = "9999";
        newDivWidth = 400;
        newDivHeight = 200;
        newDiv.style.width = newDivWidth + "px";
        newDiv.style.height = newDivHeight + "px";
        newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
        newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
        newDiv.style.background = "#EFEFEF";
        newDiv.style.border = "1px solid #860001";
        newDiv.style.padding = "5px";
        newDiv.innerHTML = " ";
        document.body.appendChild(newDiv);        //弹出层滚动居中        function newDivCenter()
        {
            newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
            newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
        }
        if(document.all)
        {
            window.attachEvent("onscroll",newDivCenter);
        }
        else
        {
            window.addEventListener('scroll',newDivCenter,false);
        }        //关闭新图层和mask遮罩层
        var newA = document.createElement("div");
        newA.innerHTML ="取消";
        var newB = document.createElement("TEXTAREA");
        newB.setAttribute("cols","40");
        newB.setAttribute("rows","10");
        newA.onclick = function(){
            if(document.all)
            {
                window.detachEvent("onscroll",newDivCenter);
            }
            else
            {
                window.removeEventListener('scroll',newDivCenter,false);
            }
            document.body.removeChild(docEle(_id));
            document.body.removeChild(docEle(m));
            return false;
        }
        newDiv.appendChild(newB);
        newDiv.appendChild(newA);
    }
</script>
<body>    <a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">弹出层</a>
</body>