怎么给弹出DIV加上阴影边框

以下代码是一个DIV弹出框，怎么能够在这个DIV外加阴影边框。（由于本人是新手，请各位大虾尽量能够解释的详细一些。）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body><a class="showWindow" href="javascript:showWindow()" >点击这里</a>打开窗口<br /> 
</body>
<script language="javascript">
function showWindow(){
if(document.getElementById("divWin"))
{
$("divWin").style.zIndex=999;
$("divWin").style.display="";
}
else
{
var objWin=document.createElement("div");
objWin.id="divWin";
objWin.style.position="absolute";
objWin.style.width="761px";
objWin.style.height="220px";
//objWin.style.border="2px solid #AEBBCA";
objWin.style.background="#FFF";
objWin.style.zIndex=999;
document.body.appendChild(objWin);
}if(document.getElementById("win_bg"))
{
$("win_bg").style.zIndex=998;
$("win_bg").style.display="";
}
else
{
var obj_bg=document.createElement("div");
obj_bg.id="win_bg";
obj_bg.className="win_bg";
document.body.appendChild(obj_bg);
}var str="";
str+='<div class="winTitle" onMouseDown="startMove(this,event)" onMouseUp="stopMove(this,event)" style="background:url(3.jpg);height:41px;"><span class="title_right"><a href="javascript:closeWindow()" title="单击关闭此窗口">关闭</a></span><br style="clear:right"/></div>'; //标题栏
str+='<div class="winContent" style="border:1px solid red; height:500px"></div>'; //窗口内容
$("divWin").innerHTML=str;
}
function closeWindow(){
$("divWin").style.display="none";
$("win_bg").style.display="none";
}
function $(o){
return document.getElementById(o);
}
function startMove(o,e){
var wb;
if(document.all && e.button==1) wb=true;
else if(e.button==0) wb=true;
if(wb)
{
var x_pos=parseInt(e.clientX-o.parentNode.offsetLeft);
var y_pos=parseInt(e.clientY-o.parentNode.offsetTop);
if(y_pos<=o.offsetHeight)
{
document.documentElement.onmousemove=function(mEvent)
{
var eEvent=(document.all)?event:mEvent;
o.parentNode.style.left=eEvent.clientX-x_pos+"px";
o.parentNode.style.top=eEvent.clientY-y_pos+"px";
}
}
}
}
function stopMove(o,e){
document.documentElement.onmousemove=null;
}
</script>
</html>
如果有更好的DIV弹出框，也请大家分享一下。

解决方案 »

  1.   

    http://hi.csdn.net/attachment/201105/19/10009102_130577678013Aa.jpg
    图片
      

  2.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>弹出提示</title>
    <style>
    * {margin:0;padding:0;font-size:12px;}
    html,body {height:100%;width:100%;}
    #content {background:#f8f8f8;padding:30px;height:100%;}
    #content a {font-size:30px;color:#369;font-weight:700;}
    #alert {border:1px solid #369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;}
    #alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;}
    #alert h4 span {float:left;}
    #alert h4 span#close {margin-left:210px;font-weight:500;cursor:pointer;}
    #alert p {padding:12px 0 0 30px;}
    #alert p input {width:120px;margin-left:20px;}
    #alert p input.myinp {border:1px solid #ccc;height:16px;}
    #alert p input.sub {width:60px;margin-left:30px;}
    </style>
    </head>
    <body>
    <div id="content">
    <a href="#">注册</a>
    </div>
    <div id="alert">
    <h4><span>现在注册</span><span id="close">关闭</span></h4>
    <p><label>用户名</label><input type="text" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p>
    <p><label>密　码</label><input type="password" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p>
    <p><input type="submit" value="注册" class="sub" /><input type="reset" value="重置" class="sub" /></p>
    </div>
    <script type="text/javascript">
    /**
    *Author:银子
    *Date:2007/10/11
    */
    var myAlert = document.getElementById("alert");
    var reg = document.getElementById("content").getElementsByTagName("a")[0];
    var mClose = document.getElementById("close");
    reg.onclick = function()
    {
    myAlert.style.display = "block";
    myAlert.style.position = "absolute";
    myAlert.style.top = "50%";
    myAlert.style.left = "50%";
    myAlert.style.marginTop = "-75px";
    myAlert.style.marginLeft = "-150px";
    mybg = document.createElement("div");
    mybg.setAttribute("id","mybg");
    mybg.style.background = "#000";
    mybg.style.width = "100%";
    mybg.style.height = "100%";
    mybg.style.position = "absolute";
    mybg.style.top = "0";
    mybg.style.left = "0";
    mybg.style.zIndex = "500";
    mybg.style.opacity = "0.3";
    mybg.style.filter = "Alpha(opacity=30)";
    document.body.appendChild(mybg);document.body.style.overflow = "hidden";
    }
    mClose.onclick = function()
    {
    myAlert.style.display = "none";
    mybg.style.display = "none";
    }
    </script>
    <script type="text/javascript" src="../js.js"></script>
    </body>
    </html>
      

  3.   

    这个不是我想的  我主要想要的是在我的DIV边框上怎么加上阴影效果
      

  4.   

    可以直接使用box-shadow
    box-shadow
      

  5.   

    另外Shadow jQuery Plugin 也是很简单 的http://www.edgarverle.com/shadow/default.cfm
      

  6.   

    #divWin{
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color=’#999999′);/*for ie6,7,8*/
    -webkit-box-shadow:2px 2px 3px #aaa;/*webkit*/
    -moz-box-shadow:2px 2px 3px #aaa;/*firefox*/ box-shadow:2px2px5px#969696;/*opera或ie9*/
    }