使用javascript制作窗体弹出在当前内容的中间

最新推荐文章于 2024-07-18 16:22:57 发布

码农小旋风

最新推荐文章于 2024-07-18 16:22:57 发布

阅读量480

点赞数 1

分类专栏： javaScript使用总结文章标签： javascript制作窗体 javascrpt window 控制窗体的位置 html

本文链接：https://blog.csdn.net/u010785969/article/details/41408085

版权

javaScript使用总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>长江三峡通航管理局</title>

<style type="text/css">
	.contentLine{
		width: 600px;height:400px;margin:0px auto;border:#cccccc solid 1px; border-top-left-radius:2em;border-top-right-radius:2em; 
	}
	.content{
		text-align:center;
	}
</style>

<script type="text/javascript">
	function chooseColorWindow(){
		//打开一个新的窗口 默认位置都是在当前窗口的左上角
		myWindow=window.open('file:///F:/javascript/window/table.html','','width=600,height=400');
		//获取div的dom实例
		contentDiv=document.querySelector("div.contentLine");
		//当前div的宽度
		var w=contentDiv.clientWidth;
		//当前div的高度度
		var h=contentDiv.clientHeight;
		//相对于流浪器左边的距离
		var bodyW=contentDiv.getBoundingClientRect().left;
		//相对于流浪器上边的距离
		var bodyH=contentDiv.getBoundingClientRect().top;
		
		//计算得到当前弹出窗体的位置
		var x=bodyW+w/2;
		var y=bodyH+h/2;
		myWindow.moveTo(x,y);
		myWindow.focus();
	}
</script>
</head>
<body>
	<div class="contentLine">
		<div class="contentHead" style="width:600px;height:20%;border-bottom:#cccccc solid 1px;"></div>
		<div class="content" style="width:600px;height:80%;">
			<p>颜色条数：<input type="text" name="colorNum">
			<p><input type="radio" name="color">单一颜色<input type="radio" name="color">统一颜色<input type="radio" name="color">默认颜色
			<p><input type="button" value="选择颜色值" οnclick="chooseColorWindow()"></button>
		<div>
			
	<div>

</body>
</html>

码农小旋风

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用javascript制作窗体弹出在当前内容的中间

长江三峡通航管理局 .contentLine{ width: 600px;height:400px;margin:0px auto;border:#cccccc solid 1px; border-top-left-radius:2em;border-top-right-radius:2em; } .content{ text-align:center; } func
复制链接

扫一扫