自定义弹出窗？？？

弹出层的故事需要用到JS，DIV+CSS 就这么多了网上有专门的框架，调用就好了，不记得地址了，呵~

类似：window.showModalDialog(url,null,"dialogHeight:40,dialogWidth:50,status:yes");
具体参数查JS API吧。

http://www.cnblogs.com/henryfan/archive/2007/03/01/660762.html这里有个JQuery版的

window.showModalDialog(url,null,"dialogHeight:40,dialogWidth:50,status:yes");
用这个弹出模态窗口就可以了，其中url是你要弹出的窗口的地址，窗口的高度和宽度都可以通过dialogHeight:40,dialogWidth:50这个来设置，status:yes这个参数设置是否显示状态栏，还有很多参数可以设置，具体自己可以查看一下JavaScript的API

function open1(){
winStyle = "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=850,height=600,";
winLeft = "left="+(screen.AvailWidth-850)/2;
winTop = ",top="+(screen.AvailHeight-600)/2;
winStyle = winStyle + winLeft + winTop;
var u="selgoodsID.jsp";
window.open(u,"editd",winStyle);

}

在DIV里嵌一个iframe指向你要的页面就可以了.

<!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">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
        .drag {
            position: absolute;
            left: 400px;
            top: 100px;
            background-color: blue;
            height: 80px;
            width: 80px;
            cursor: pointer;
        }
    </style>    <script type="text/javascript">
        /**`
         * wrf.js 我的JS组件
         * @author [email protected]
         */        //原型继承
        function extend(Child,Parent){
            var F=function(){
            };
            F.prototype=Parent.prototype;
            Child.prototype=new F();
            Child.prototype.constructor=Child;
            Child.uber=Parent.prototype;
        }
        //如果浏览器没有实现 push,pop就无法用$,所以要自定义一个
        if(!Array.prototype.push){
            Array.prototype.push=function array_push(){
                for(var i=0; i<arguments.length; i++)
                    this[this.length]=arguments[i];
                return this.length;
            }
        }
        if(!Array.prototype.pop){
            Array.prototype.pop=function array_pop(){
                lastElement=this[this.length-1];
                this.length=Math.max(this.length-1,0);
                return lastElement;
            }
        }
        //自定义一个函数获取对象，这里用数组，可以获取多个对象，用逗号隔开。下面的方法在此不能用
        /*function $(){
         var elements=[];
         var i;
         for(i=0;i<arguments.length; i++){
         var element=arguments[i];
         if(arguments.length==1){
         return element;
         }
         if(typeof element=='string'){
         element=document.getElementById(element);
         }
         elements.push(element);
         }
         return elements;
         }*/        var zi=10000;
        function $(id){
            if(typeof id=='string'){
                return document.getElementById(id);
            }
            return false;
        }
        function drag(id,dragid,mask){
            this.version='1.0';
            this.pubDate='2009-06-10';
            this.id=id;
            this.dragid=dragid;
            this.config={
                mask:mask
            };
        }
        drag.prototype.init=function(){
            //这里的this是new drag();
            this.o=$(this.dragid);
            this.o.onmousedown=this.down;
this.o.style.zIndex=zi;
        };
        drag.prototype.down=function(){
var e=getEvent();
            //这里的this指向的是上面的this获得到的$(this.dragid)
            //this.lastMouseX=e.clientX||e.layerX;
            //this.lastMouseY=e.clientY||e.layerY;
this.lastMouseX=e.clientX;
this.lastMouseY=e.clientY;
            this.onmousemove=move;
            this.onmouseup=up;
            zi=this.style.zIndex=zi+1;
if(/msie/i.test(navigator.userAgent)){
this.setCapture();
}else if(/firefox/i.test(navigator.userAgent)){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}        };
        function move(){
//e=e||event;
var e=getEvent();
            var dx=e.clientX-this.lastMouseX;
            var dy=e.clientY-this.lastMouseY;
            //因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化,否则FF下不能运行.
            var left=parseInt(this.style.left)+dx+'px';
            var top=parseInt(this.style.top)+dy+'px';
            this.style.left=left;
            this.style.top=top;
            this.lastMouseX=e.clientX;
            this.lastMouseY=e.clientY;
$('lmx').value=this.lastMouseX;
$('lmy').value=this.lastMouseY;
        };
        function up(){
if(/msie/i.test(navigator.userAgent)){
this.releaseCapture();
}else if(/firefox/i.test(navigator.userAgent)){
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
            this.onmousemove=null;
            this.onmouseup=null;
        };
        function createMask(){
            var mask=document.createElement('div');
            mask.setAttribute('id','maskDiv');
            mask.style.position='absolute';
            mask.style.top='0';
            mask.style.background='#641';
            //遮罩层的透明显示.
            mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
            mask.style.opacity="0.6";
            mask.style.left="0";
            mask.style.width=document.body.offsetWidth+"px";
            mask.style.height=screen.availHeight+"px";
            mask.style.zIndex="9999";
            document.body.appendChild(mask);
        };
        function createDiv(){
            var msgObj=document.createElement("div");
            msgObj.setAttribute("id","msgDiv");
            msgObj.style.backgroundColor='yellow';
            msgObj.style.border="1px solid #567893";
            msgObj.style.position="absolute";
            msgObj.style.left=300+"px";
            msgObj.style.top=200+"px";
            msgObj.style.width=400+"px";
            msgObj.style.height=300+"px";
            msgObj.style.lineHeight="25px";
            msgObj.style.zIndex="10001";
            document.body.appendChild(msgObj);
return msgObj;
        }
        ;
        function getEvent(){
return window.event||arguments.callee.caller.arguments[0];
        }
    </script>
</head>
<body style="background-color:white">
<br/><br/><br/>
<div>
    lastMouseX:<input id="lmx" type="text"/><br/>
    lastMouseY:<input id="lmy" type="text"/><br/>
</div>
<div id="r"
     style="position:absolute;left:100px; top:100px; background-color:red; height:80px; width:80px;cursor:pointer;">
    <div id='txt1'>这是第一个文本</div>
</div>
<div id="g"
     style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;cursor:pointer;">
    <div id='txt2'>这是第二个文本</div>
</div>
<div id="b"
     style="position:absolute; left:400px; top:100px; background-color:blue; height:80px; width:80px;cursor:pointer;"></div>
</body>
</html><script type="text/javascript">
createMask();
    var da=new drag('','r');
    da.init();
    var dg=new drag('','g');
    dg.init();
    var db=new drag('','b');
    db.init();
var di=createDiv();
var d=new drag('',di.id);
d.init();
</script>

window.open()方法基本可以满足你的需求。

window.open只能弹出传统窗口啊，关闭按钮和标题栏都是系统自带的！不行啊！另外8楼代码弹出的依然是传统窗口，不能完全地显示个性化的页面，还有传统的关闭按钮在上面！！！求大侠们想想办法啊！！！

下面代码是我用来实现alert和confirm使用的
div部分

<div id="alertDiv" class="layer_240x140">
<div class="Title_236x22">
<div class="close_240x140" onclick="alertInfo_cancel();"></div>
<div id="Title_236x22BG2" class="corner_t_4px">
<span id="alertDiv_title" class="h2"></span>
</div>
</div>
<div class="body_240x140">
<div class="border_50x50" style="top: 4px; left: 10px;">
<div class="img_44x44">
<img id="alertDiv_img"
src="../images/game/slg_pic/onionhead.gif"
style="width: 44px; height: 44px;" />
</div>
<p id="alertDiv_info" class="box_156x60"></p>
</div>
<ul class="box_236x20">
<li id="alertDiv_confirm" class="li_queding"
onclick="alertInfo_confirm()"></li>
<li id="alertDiv_cancel" class="li_quxiao"
onclick="alertInfo_cancel();"></li>
</ul>
</div>
<div id="alertDiv_BG2" class="corner6px"></div>
</div>

js部分
/**
* 提示信息框
* @param {Object} info 提示信息
* @param {Object} type 提示信息框类别('alert'提示框,'confirm'确认框)
* @param {Object} img 提示信息图地址
*/
function alertInfo(info, type, img){
document.getElementById("alertDiv").style.display = "block";
if(type=="alert"){
document.getElementById("alertDiv_title").innerHTML = "提示框";
document.getElementById("alertDiv_confirm").className="li_queding_2";
document.getElementById("alertDiv_cancel").style.display="none";
}else if(type=="confirm"){
document.getElementById("alertDiv_title").innerHTML = "确认框";
document.getElementById("alertDiv_confirm").className="li_queding";
document.getElementById("alertDiv_cancel").style.display="block";
}
if(img!=null && img!=""){
document.getElementById("alertDiv_img").src = img;
}
document.getElementById("alertDiv_confirm").style.display="block";
document.getElementById("alertDiv_info").innerHTML = info;
}function alertInfo_init(){
document.getElementById("alertDiv").style.display = "none";
document.getElementById("alertDiv_confirm").onclick = function(){alertInfo_confirm()};
document.getElementById("alertDiv_cancel").onclick = function(){alertInfo_cancel()};
}/**
* 提示信息确认动作
*/
function alertInfo_confirm(){
document.getElementById("alertDiv").style.display = "none";
} /**
* 提示信息取消按钮动作
*/
function alertInfo_cancel(){
document.getElementById("alertDiv").style.display = "none";
}
调用的时候调用alertInfo方法,如果是confirm就设置一下confirm按钮的执行方法,执行中调用alertInfo_init重置一下就行了.
以前做的,^_^

调试易

自定义弹出窗？？？

解决方案 »