div弹出登录窗口

<meta charset="utf-8"/>
<script  type="text/javascript">
//弹出式登录
    function ShowNo()                        //隐藏两个层
    {
        document.getElementById("doing").style.display = "none";
        document.getElementById("divLogin").style.display = "none";
    }
    function $(id) {
        return (document.getElementById) ? document.getElementById(id) : document.all[id];
    }
    function showFloat()                    //根据屏幕的大小显示两个层
    {
        var range = getRange();
        $(‘doing‘).style.width = range.width + "px";
        $(‘doing‘).style.height = range.height + "px";
        $(‘doing‘).style.display = "block";
        document.getElementById("divLogin").style.display = "";
    }
    function getRange()                      //得到屏幕的大小
    {
        var top = document.body.scrollTop;
        var left = document.body.scrollLeft;
        var height = document.body.clientHeight;
        var width = document.body.clientWidth;

        if (top == 0 && left == 0 && height == 0 && width == 0) {
            top = document.documentElement.scrollTop;
            left = document.documentElement.scrollLeft;
            height = document.documentElement.clientHeight;
            width = document.documentElement.clientWidth;
        }
        return { top: top, left: left, height: height, width: width };
    }
    //这是自己写的登录方法,如果要用的话请注意修改这一块
    function Login() {
        var username = document.getElementById("txtUserName").value;
        var pwd = document.getElementById("txtPwd").value;
        if (username == "" || pwd == "") {
            alert("请输入用户名或密码");
            return;
        }
        var div = document.getElementById("userinfo");
        var xmlHttp = GetXmlHttpObject();
        //指定回调函数
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                m = xmlHttp.responseText;
                if (m == "0") {
                    alert("用户名或密码不正确");
                }
                else {
                    Msg = m;
                    div.innerHTML = "<a href=‘../MusicSite/MemberCenter.aspx‘ target=‘_blank‘>" + m + "</a>";
                    div.setAttribute("class", "mid");
                    ShowNo();

                }
            }
        };
        //初始化xmlhttprequst
        xmlHttp.open("POST", "Login.aspx", true);
        //设置头部
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //发送数据
        var data = "username=" + escape(username) + "&pwd=" + escape(pwd);
        xmlHttp.send(data);
    }
</script>
<!-- 下面是写在html中的代码 -->
<!-- 这个是你的登录按钮     -->
<a href="#" onclick="showFloat()">登录</a>
<!--弹出式登录--->
<!--加一个半透明层-->
    <div id="doing" style="filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;background-color:#000;width:100%;height:100%;z-index:1000;position: absolute;left:0;top:0;display:none;overflow: hidden;">
    </div>
<!--加一个登录层-->
  <div id="divLogin" style="border:solid 10px #898989;background:#fff;padding:10px;width:400px;z-index:1001;height:200px; position: absolute; display:none;top:50%; left:50%;margin:-200px 0 0 -200px;">
            <div style="padding:3px 15px 3px 15px;text-align:left;vertical-align:middle;" >
                <div>
                    用户名:
                    <input type="text" style="border:1px solid #898989;height:20px;" id="txtUserName" />
                    <br />
                     密   码:
                    <input type="password" style="border:1px solid #898989;height:20px;margin-left:10px;" id="txtPwd"  onkeydown="if(event.keyCode==13) {Login();}" />
                </div> 

                <br/>
                <div style="text-align:center;"> &nbsp; &nbsp;
                   <input type="button" id="BttLogin" value="登录" onclick="Login();"/>

                  &nbsp;
                  <input type="button"  id="BttCancel" value="取消" onclick="ShowNo()"/>
                </div>
            </div>
      </div> 

div弹出登录窗口

时间: 2024-07-30 13:01:31

div弹出登录窗口的相关文章

帝国CMS弹出登录窗口实现方法

帝国CMS弹出登录窗口实现方法 看到好多网站都用弹出登陆窗口让用户登陆注册,其实就是用JS调用一个DIV层实现的 今天我用帝国CMS具体讲一下怎么实现这个效果: 一.打开帝国CMS后台-公共模板-JS讲用登陆模板 把附件里的调用登陆模板代码复制进去-修改 二.在你的首页加入CSS样式和JS代码 1.CSS: <style> #lggoodBox{ margin:0 auto; padding:0px; text-align:left; width:370px; height:220px; ba

Jquery+div+css实现弹出登录窗口

基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

第一百三十三节,JavaScript,封装库--弹出登录框

JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事件,当窗口的大小变化时触发函数 /** yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面, * 注意:使用此方法时,首先要在css里将目标区块设置成(绝对定位,position: absolute;) **/ feng_zhuang_ku.prototype.yuan_su_j

javascript--自定义弹出登陆窗口(弹出窗)

web开发中浏览器对象封装了诸如prompt.alert.confirm等弹出框,但是有的弹出框并不能满足开发需要,需要我们自己定义弹出框,诸如用户登陆框.消息提示框等.本文利用弹出用户登陆框示例,对这部分知识做个小结. 示例需求:点击按钮,弹出登陆窗口,且该窗口可以拖拽,弹出窗口的同时,整个页面变成灰色半透明. 效果图如下:图1是起始页面,图2是点击"点击,弹出登陆框"按钮后页面,图3是登陆框自由拖动后页面.                                     

纯JavaScript+HTML+CSS 的div弹出框

CSS <style> .mask { width:100%; height:100%; position: absolute; top:0; left:0; filter: alpha(opacity=40); -moz-opacity:0.4; opacity:0.4; background-color: #ffffff; z-index:2; display: none; } div.sample_popup { height:auto; border:10px solid #64646

div弹出层的效果带关闭按钮

下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .tcck { width: 440px; height: 132px; border: 1px solid #6E665A; border-radius: 5px; background: #fff; padding-top: 10px; position: absolute; z-index: 9999999

网页上弹出pop窗口实例,(document).height()与$(window).height()的区别

#dvbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}        #dvpop{position:absolute;display:none;width:auto; height:auto; z-in

***小程序wx.getUserInfo不能弹出授权窗口后的解决方案

微信更新api后,wx.getUserInfo在开发和体验版本都不能弹出授权窗口.微信文档说明: 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作 当用户未授权过,调用该接口将直接报错 当用户授权过,可以使用该接口获取用户信息 对此,给出以下解决方案. wx.getUserInfo({ withCredentials: true, success

弹出登录框

案例弹出登录框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-heigh