zoukankan      html  css  js  c++  java
  • jQuery实现一个弹出登陆层的效果

    导读:现在很多网页点击登陆按钮都会弹出一个对话框出来,一般情况下是不会显示出来的,只有在点击登陆时。其实这个一个层的操作。好,废话少说,现在我们来实现这个神奇的效果。

    步骤:

    一:首先使用css画出一个层出来

    二:使用jQuery实现点击操作。

    具体代码如下解释就不必啦。相信大家都是大牛。实在不懂得请“悟”吧。我一直在看别人的源码在悟!

    <!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>
    <title></title>
    <style type="text/css">
    body{padding:50px;margin:0;}
    .box{border:solid 1px #666;300px;height:120px;display:none;}
    .box h3{background:gray;font-size:15px;padding-left:10px;}
    .box span{float:right;}
    .content{padding-left:10px;}
    </style>
    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    $("a").click(function () {
    $("#divFrame").css("display", "block");
    });
    $("#close").click(function () {
    $("#divFrame").css("display","none");
    });
    });
    </script>
    </head>
    <body>
    <a href="#">登陆</a>
    <div id="divFrame" class="box">
    <h3><span id="close">关闭</span>基本信息</h3>
    <div id="divContent" class="content">
    用户名:<input type="text" /><br />
    密&nbsp;&nbsp;码:<input type="password" /><br />
    <input type="button" value="提交" />
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    Git使用及关联远程仓库
    Ceres Solver
    Halcon手眼标定
    Halcon 3D定位方法
    机器学习-数学基础
    Halcon匹配方法
    手眼标定
    C动态内存分配
    Halcon Calibration Assistant
    Visualization
  • 原文地址:https://www.cnblogs.com/luodao1991/p/2825564.html
Copyright © 2011-2022 走看看