zoukankan      html  css  js  c++  java
  • 使用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; 100%; height:100%; background:#000;
    opacity:0.5;filter:alpha(opacity=50);
    }
    .alert{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>
    
  • 相关阅读:
    Mysql配置文件解析
    Mysql的视图
    Setup和 Hold
    洛谷 P2257
    洛谷 P3455
    洛谷 P1447
    洛谷 P1155
    洛谷 P1262
    洛谷 P4180
    洛谷 P5540
  • 原文地址:https://www.cnblogs.com/moon-yyl/p/8724800.html
Copyright © 2011-2022 走看看