您的位置：首页 > Web前端 > JavaScript

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

2014-11-23 09:58 274 查看

<!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="选择颜色值" onclick="chooseColorWindow()"></button>
<div>

<div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航