使用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>

 

posted on 2018-04-05 23:14  朝颜陌  阅读(372)  评论(0)    收藏  举报

导航