在当前页弹出一个小的对话框
假若一个人浏览一个网页,因为没有登录,弹出一个登录的对话框,这样应该怎么实现
[解决办法]
这个是你可以看到的弹出层登陆效果
<style type="text/css">
<!--
.popupdiv { border:2px solid #eee; text-align:left;display:block; position:absolute; top:50%; left:50%;z-index:999;}
#popupbg{ background:#000; width:100%; position:absolute; top:0; left:0; z-index:998;opacity:0.3;filter:Alpha(opacity=30);}
#loginFram,#policyfailedFram,#loginfailedFram,#errorFram {width:390px;}
#quoteFram {width:645px;}
#quotefailedFram{ width:460px;}
.win460{width:460px;}
.win645{width:645px;}
.win_in{ border:1px solid #999;}
.win_in h4{ background-color:#eee; border-bottom:1px solid #fff; padding-left:16px; color:#333; font-size:12px; font-weight:bold; height:28px; line-height:28px;}
.win_info{ background-color:#fff; border-top:1px solid #D8D8D8; padding:0 36px 30px 36px;}
.win_info h3{ background:url(../web/images/win_pic_print01.gif) no-repeat 34px center; padding:25px 0 25px 90px; font-size:16px; font-weight:bold; line-height:22px; color:#333;}
.win_info p{ line-height:20px; color:#333; margin-bottom:20px;}
.win_info ul { margin-bottom:25px;}
.win_info ul li{ background:url(../web/images/insured_pic_print01.gif) no-repeat left 8px; padding-left:12px;line-height:20px; color:#333;}
.win_img{ text-align:center;}
.win_top{ background-color:#eee; border-bottom:1px solid #fff; height:28px;}
.win_top h2{ padding-left:16px; color:#333; font-size:12px; font-weight:bold; height:28px; line-height:28px; float:left;}
.win_top span{ float:right; text-align:right; padding-right:16px; height:28px; line-height:28px;}
.win_tab{ margin-bottom:25px;}
.win_tab td{ height:25px; padding:0 10px; line-height:25px; color:#333;}
.win_m{ padding-top:30px;}
.win_table,.win_notes {background-color:#fff; border-top:1px solid #D8D8D8;}
.win_table{ padding:5px 25px 30px 25px;}
.win_notes{ padding:20px 25px 30px 25px; }
.win_notes p{line-height:24px;}
.win_notes h1{ color:#333; font-size:16px; font-weight:bold; line-height:28px; text-align:center; padding:25px 0;}
.win_notes h2{ color:#FF8400; font-size:12px; font-weight:bold; line-height:32px;}
.win_right{ text-align:right;color:#333; }
.win_box,.win_box1{ border:1px solid #B2B2B2;}
.win_box{padding:15px 24px; margin-bottom:18px;}
.win_box1 td{ padding:6px;}
.win_left{ margin-left:84px;}
.win_mb{ margin-bottom:20px;}
.colorgra { color:#666; text-decoration:underline;}
.line{ background:url(../web/images/win_pic_print02.gif) repeat-x left top;}
.ulline{background:url(../web/images/win_pic_print02.gif) repeat-x left bottom; padding-bottom:15px; margin-bottom:15px;}
.ulline li{ line-height:36px;}
.colorgorg30{ font-size:30px; color:#FF8400;}
.indent{ text-indent:2em}
.indent1{ text-indent:42px;}
.colorgorgp{color:#FF8400; font-weight:bold; padding:5px 0;text-indent:2em}
.hidden { display:none;}
.show{ display:block;}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function $id(){
var elements = new Array();
for (var i = 0; i < arguments.length; i++){
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
function popupTips(obj){
var popupDiv = $id(obj);
popupDiv.className = "popupdiv";
popupDiv.style.marginLeft = "-" + popupDiv.clientWidth/2 + "px";
popupBg = document.createElement("div");
popupBg.setAttribute("id","popupbg");
pHeight = popupDiv.clientHeight;
bHeight = document.body.clientHeight;
if(pHeight>bHeight){
popupBg.style.height = pHeight+300+"px";
popupDiv.style.marginTop = "-250px";
}else{
popupBg.style.height = bHeight+"px";
popupDiv.style.marginTop = "-" + popupDiv.clientHeight/2 + "px";
}
document.body.appendChild(popupBg);
hiddenSelect();
}
function closeDiv(obj){
popupBg.className = "hidden";
$id(obj).className = "hidden";
showSelect();
}
function hiddenSelect(){
if($id("leftcnt")){
var items = $id("leftcnt").getElementsByTagName("select");
for(var i=0;i <items.length;i++){
items[i].style.visibility="hidden";
}
}
}
function showSelect(){
if($id("leftcnt")){
var items = $id("leftcnt").getElementsByTagName("select");
for(var i=0;i <items.length;i++){
items[i].style.visibility="visible";
}
}
}
//-->
</script>
</head>
<body>
<!------ 弹出提示 ------>
<!-- 登录框 -->
<div id="loginFram" class="hidden">
<div class="win_in">
<div class="win_top">
<h2>系统提示 </h2>
<span> <a href="#" onclick="closeDiv('loginFram');" class="link_black">关闭 </a> </span> </div>
<div class="win_info win_m">
<table width="316" border="0" cellspacing="0" cellpadding="0" class="win_tab">
<tr>
<td width="111" align="right">姓名 </td>
<td width="205"> <input name="text" type="text" class="edit" onfocus="this.style.borderColor='#ff8400';" onblur="this.style.borderColor='#bdbdbd'" onclick="this.select()" /> </td>
</tr>
<tr>
<td align="right">证件号码 </td>
<td> <input name="text2" type="text" class="edit" onfocus="this.style.borderColor='#ff8400';" onblur="this.style.borderColor='#bdbdbd'" onclick="this.select()" /> </td>
</tr>
<tr>
<td align="right">E-mail </td>
<td> <input name="text3" type="text" class="edit" onfocus="this.style.borderColor='#ff8400';" onblur="this.style.borderColor='#bdbdbd'" onclick="this.select()" /> </td>
</tr>
</table>
<div class="win_img">
<input name="Input2" type="image" src="images/win_bt_print02.gif" alt="登录" />
</div>
</div>
</div>
</div>
<!-- END -->
<!-- 弹出提示结束 -->
<a href="#" onclick="popupTips('loginFram');">如果你判断了没有登陆。就执行点击这个的函数
</div>
