使用form 表单 弹出登录框,只传递数据,不刷新界面
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #iBox{display:none;} #iBoxBackground{display:none;} body{margin:0;} body,html{height:100%;} .floats{position:absolute;top:0;left:0; width:100%; height:100%; background:#000; opacity:0.5;filter:alpha(opacity=50); } .alert{width:400px; height:200px; background:#fff; border:2px solid yellow; position:absolute;top:50%;left:50%; margin-top:-102px; margin-left:-202px;} </style> <script> window.onload = function(){ var in1 = document.getElementById('inTest'); in1.onclick = inBtton; } function inBtton(){ var bn1 = document.getElementById('iBox'); var bn2 = document.getElementById('iBoxBackground'); bn1.style.display = 'block'; bn2.style.display = 'block'; } function apply(){ var bn1 = document.getElementById('iBox'); var bn2 = document.getElementById('iBoxBackground'); document.reAuth.submit(); bn1.style.display = 'none'; bn2.style.display = 'none'; } </script> </head> <body> <input type="text"/></br> <input id="inTest" type="button" value="修改"/> <div class="floats" id="iBoxBackground"></div> <div id="iBox" class="alert"> <form method="post" name="reAuth" target="id_iframe"> <table> <tr> <th colspan="2">用户认证</th> </tr> <tr> <td>用户名:</td> <td><input type="text"/></td> </tr> <tr> <td>密码:</td> <td><input type="password"/></td> </tr> <tr> <td colspan="2" align="center"> <input type="button" onclick="apply();" value="登陆"/> </td> </tr> </table> </form> <iframe id="id_iframe" name="id_iframe" style="display:none;"></iframe> </div> </body> </html>