怎样创建一个登陆框？

index.html<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
width:1000px;
margin:0 auto;
}
ul {
list-style-type:none;
margin-top:50px;
}
li {
float:left;
width:100px;
border-right:#F00 1px solid;
height:20px;
line-height:20px;
text-align:center;
margin-left:10px;
}
</style>
<title></title>
</head>
<body>
<ul>
  <li>语文</li>
  <li>数学</li>
  <li>物理</li>
  <li>化学</li>
  <li><a href="#" onClick="">登录</a></li>
</ul>
</body>
</html>
form.html<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form style="border:#CCC 1px solid; padding-left:20px; width:200px; padding-top:10px;">
  <input type="text" />
  </p>
  <input type="text" />
  </p>
  <input type="submit" value="提交" style=" margin-left:50px;" />
</form>
</body>
</html>
问题:怎样在点击登录的时候 在页面上弹出一个创建的登录框并把form.html的内容放进去

解决方案 »

  1.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body {
    width:1000px;
    margin:0 auto;
    }
    ul {
    list-style-type:none;
    margin-top:50px;
    }
    li {
    float:left;
    width:100px;
    border-right:#F00 1px solid;
    height:20px;
    line-height:20px;
    text-align:center;
    margin-left:10px;
    }
    </style>
    <title></title>
    </head>
    <body>
    <ul>
      <li>语文</li>
      <li>数学</li>
      <li>物理</li>
      <li>化学</li>
      <li><a href="#" onClick="login()">登录</a></li>
    </ul>
    <div style="display:none;" id="login">
    <iframe src="form.html" scrolling="no" ></iframe>
    </div>
    <script>
    function login(){
    document.getElementById('login').style.display = 'block';
    };
    </sript>
    </body>
    </html>
      

  2.   

    <li><a href="#" onClick="showDiv()">登录</a></li><div id=x style="display:none;position:absolute">
    <iframe src="form.html"></iframe>
    </div>function showDiv()
    {
    document.getElementById("x").style.display="";
    //然后在定下位置即可
    }
      

  3.   

    谢谢 你们措意会了 按你们的弄法是不是每个页面都要隐藏一个表单 这工作量太海了
    不管用户是在那个页面登陆 我想只需要引入一个登陆页面  然后再当前的页面创建一个div并把表单放进去 就ok
      

  4.   

    你可以把这段弹出框html
    <div style="display:none;" id="login">
        <iframe src="form.html" scrolling="no" ></iframe>
    </div>
    写在js里，然后document.write出来~·
    这样每个页面就导入一个js文件就行了~·