日期:2014-05-18  浏览次数:20696 次

在当前页弹出一个小的对话框
假若一个人浏览一个网页,因为没有登录,弹出一个登录的对话框,这样应该怎么实现

------解决方案--------------------
这个是你可以看到的弹出层登陆效果
HTML code
 <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;
  &n