弹出窗口特效

wxy-54

已于 2023-04-14 22:01:35 修改

阅读量679

点赞数 3

文章标签： javascript html css

于 2023-04-14 18:10:26 首次发布

本文链接：https://blog.csdn.net/swang_54/article/details/130147545

版权

制作弹出窗口特效

一. 静态页面设计

一. 静态页面设计

（1）完成注册静态页面设计（register.html)，贞面为7行2列的表格，内容为注册表单form。

<body>
		<div class="bluebg">
			<div class="header">
				<div class="headerlinks">
					<a href="http://www.chsi.com.cn/#" target="_blank">学信网</a>　
					<a href="#" target="_blank">学信档案</a>　|
					<a href="#" target="_blank">阳光高考</a>　|
					<a href="#" target="_blank">研招网</a>　|
					<a href="#" target="_blank">全国征兵网</a>　|
					<a href="#" target="_blank">大创网</a>
				</div>
				<div class="headertxt">
					<a href="#" target="_blank">首页</a>　|
					<a href="#" target="_blank">联系我们</a>
				</div>
			</div>
			<div class="box clearfix">
				<div class="t">
					欢迎注册学信网账号
					<div class="tlogin">
						已有学信网账号
						<a href="#" class="regsuclogin">立即登录</a>
					</div>
				</div>
				<div class="mainbox clearfix">
					<form>
						<div class="maintxt">
							注册成功后可以使用中国研究生招生信息网、阳光高考、学信档案、全国征兵网、全国大学生创业服务网提供的服务。<br> （
							<a href="#" target="_blank" class="colorblue" style="text-decoration:underline;">什么是学信网账号？</a>
							<a href="#" target="_blank" class="colorblue" style="text-decoration:underline;">了解更多</a>）
						</div>
						<div class="regline clearfix">
							<table width="353" border="0">
								<tr>
									<td width="112">手机</td>
									<td width="231"><input type="text" /></td>
								</tr>
								<tr>
									<td>密码</td>
									<td><input type="password" /></td>
								</tr>
								<tr>
									<td>姓名</td>
									<td><input type="text" /></td>
								</tr>
								<tr>
									<td>身份证号</td>
									<td><input type="text" /></td>
								</tr>
								<tr>
									<td>就读学校</td>
									<td><input type="text" id="school" />
										<INPUT type="button" name="regBtn" value=" 选择  ">
									</td>
								</tr>
								<tr>
									<td>Email</td>
									<td><input type="text" /></td>
								</tr>
								<tr>
									<td colspan="2"><input type="submit" value="确定了，马上提交" /></td>
								</tr>
							</table>
					</form>
	</body>

openwindow事件代码如下：

<script>
			function openwindow(){
			//在新窗口打开school.html文档，隐藏工具栏.菜单栏,需要滚动条
				window.open("school.html","","width=400,heigh=400,top=100,left=200,toolbar=no,scrollable=yes,resizable=yes,location=no,menubar=no");
			}
			window.onload = function(){
				var btn = document.getElementsByName('regBtn')[0];
				btn.onclick = function () {
				    openwindow();
				}
				/*btn.onclick = openwindow;*/
			}
		</script>

效果图1
register.html静态页面效果图

二. openwindow(）窗口应用

（2）为就读学校文本框右侧的“选择”按添加单击事件处理函数openwindow(），在函数中调用window 对象的open()方法，打开学校列表页面(school.html)。该窗口没有菜单工具栏，包含滚动条。

<head>
		<meta charset="UTF-8">
		<title>请从列表中选择</title>
		<style>
			#mdA table,
			#mdA table td,
			#mdA table th {
				border: 1px solid #000000;
				border-collapse: collapse;
			}
		</style>
		<script>
			function choose(obj){
				var parent = window.opener.document.getElementById("school");
				parent.value=obj.innerHTML;
				self.close();
				window.opener.focus();
			}
			window.onload = function (){
				var aSchools = document.getElementsByTagName('a');
				for (var i = 0;i < aSchools.length;i++ ) {
					aSchools[i].onclick = function () {
						choose(this);
					}
				}
			}
		</script>
	</head>

效果图2

学校列表效果图

三.choose(this) 函数应用

（3) 完成school.html静态页面，使用表格布局，学校名采用超链接，对每个a标记添加单击事件处理函数choose(this)。在该函数中把当前单击的学校名称传递给父窗口register.html并填充文本框，同时关闭子窗口。

<body>
	<div id="mdA">
		<table width="300" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td>
					<a href="#" οnclick="choose(this)">广东科学技术职业学院</a>
				</td>
			</tr>
			<tr>
				<td>
					<a href="#" οnclick="choose(this)">番禺职业技术学院</a>
				</td>
			</tr>

效果图3 窗口弹出效果图
学校名称传递给父窗口并填充文本框

四. 知识点

window对象的常用方法

方法	描述
open( )	打开一个新的浏览器窗口
close( )	关闭浏览器窗口
alert( )	弹出警告框，显示一条提示消息和一个“确认”按钮
confirm( ）	弹出确认框，显示一条确认信息，一个“确认”按钮，一个取消按钮
prompt( )	弹出提示框，是一个提示用户输入的对话框

打开新窗口
使用window.open(）方法打开新窗口，语法为window. open(URL,name，features ,replace）参数说明如下。
（1) URL ：字符串。要打开新窗口的页面URL。
（2）name ：字符串。
（3）features ：字符串。由逗号分隔的特征值，指定新窗口的显示效果，如位置、高度、菜单、工具栏等。
(4) replace : 布尔值。打开的新窗口是在浏览历史中创建一个新条目，或替换当前条目，true为替换。可省略。