美高梅开户-美高梅官方网站开户

您的位置:美高梅开户 > 美高梅官方网站开户 > 通过遮罩层实现浮层DIV登录的js代码

通过遮罩层实现浮层DIV登录的js代码

发布时间:2019-09-11 17:58编辑:美高梅官方网站开户浏览(149)

    这个就没什么好说的了。。直接上代码啊!!

    首先是HTML的代码。其中包含了登录点击按钮以及一个简陋的登录框。

    复制代码 代码如下:

    <body>
    <div id="shade"></div>
    <div>
    <a onclick="login()" style="cursor:pointer">登录</a>
    </div>
    <br/>
    什么都没有用。。。<br/><br/>
    什么都没有用。。。<br/><br/>
    什么都没有用。。。<br/><br/>
    什么都没有用。。。<br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <div id="login" style="display: none; z-index:1025; position:absolute;">
    <form method="post" action="user/login.html">
    <table width="200">
    <caption>
    用户登录
    </caption>
    <tr>
    <td>用户名:</td>
    <td><input type="text" name="userName" /></td>
    </tr>
    <tr>
    <td>密码:</td>
    <td><input type="password" name="password" /></td>
    </tr>
    <tr>
    <td>验证码:</td>
    <td><img alt="" src="base/verify.html" onClick=""></td>
    </tr>
    <tr>
    <td><input type="submit" value="登录" /></td>
    <td><input type="button" value="取消" onClick="cancel()" /></td>
    </tr>
    </table>
    </form>
    </div>
    </body>

    接着是JS脚本代码的实现

    复制代码 代码如下:

    <script type="text/javascript">
    function login(){
    var shadeWidth = document.body.clientWidth 30;
    var shadeHeight = document.body.clientHeight 30;
    var shade = document.getElementById("shade");
    shade.style.width = shadeWidth "px";
    shade.style.height = shadeHeight "px";
    shade.style.display = "block";

    var loginDivWidth = 200;
    var loginDivHeight = 800;

    var loginDiv = document.getElementById("login");
    loginDiv.style.width = loginDivWidth "px";
    loginDiv.style.height = loginDivHeight "px";
    loginDiv.style.top = (document.body.scrollTop document.body.clientHeight / 2

    • loginDivHeight / 2) "px";
      loginDiv.style.left = (document.body.scrollLeft document.body.clientWidth / 2
    • loginDivWidth / 2) "px";
      loginDiv.style.display = "block";
      }

    </script>

    这里只有显示遮罩层以及登录框的代码。至于隐藏的代码也很简单,就是将遮罩层(shade)的DIV块以及登录框(login)的DIV块的display属性都设置成none应该就没有什么问题了。。

    至此,一个简单的通过遮罩层实现浮层DIV登录的功能就实现了。关于美工方面的工作就由大家自行解决了。

    在这里,有一个功能求助大家啊。。就是如何让弹出的登录框的DIV块跟随滚动条移动呢??

    我的实验代码如下。

    复制代码 代码如下:

    function loginDivCenter (){
    loginDiv.style.top = (document.body.scrollTop document.body.clientHeight / 2

    • loginDivHeight / 2) "px";
      loginDiv.style.left = (document.body.scrollLeft document.body.clientWidth / 2
    • loginDivWidth / 2) "px";
      }

    function scall (){
    loginDivCenter();
    }

    window.onscroll=scall;
    window.onresize=scall;
    window.onload=scall;

    但是很不幸的是本人失败了。。网上找了很多,但都不是符合要求的。大多是设置一个setInterval来实现。本人觉得这样做并不理想啊。。。

    求各路大神指教啊!

    您可能感兴趣的文章:

    • JS遮罩层效果 兼容ie firefox jQuery遮罩层
    • javascript div 遮罩层封锁整个页面
    • js弹出div并显示遮罩层
    • 原生js实现半透明遮罩层效果具体代码
    • 纯js实现遮罩层效果原理分析
    • js点击按钮实现带遮罩层的弹出视频效果
    • js实现遮罩层弹出框的方法
    • JS实现遮罩层效果的简单实例
    • 弹出最简单的模式化遮罩层的js代码
    • js鼠标悬浮出现遮罩层的方法
    • css js实现部分区域高亮可编辑遮罩层
    • JS简单实现点击按钮或文字显示遮罩层的方法

    本文由美高梅开户发布于美高梅官方网站开户,转载请注明出处:通过遮罩层实现浮层DIV登录的js代码

    关键词: 美高梅开户