您的位置:首页 > 其它

实现网页弹出窗口

2015-08-11 13:33 232 查看
图片热点实现超链接,控制弹出窗口。

控制弹出窗口的页面代码:

<script type="text/javascript">

function pp(){

var open=window.open("new.html","New","height=200,width=400");//控制窗口弹出,参数为弹出窗口的链接、title及窗口的大小

width=screen.width; //获取用户屏幕大小

height=screen.height;

open.moveTo((width-200)/2,(height-400)/2); //控制弹出窗口居中显示

}

</script>

<h2>测试广告的弹出页面</h2>

<div id="img">

<img src="../images/back.jpg" usemap="#map" />
//插入图片,设置usemap属性指定触发事件图片id

<map id="map">

//shape指定点击范围的形状为圆,coords为圆心横纵标及半径,以图片的左上为原点

<area shape="circle" coords="410,260,200" onclick="pp()" />

</map>

</div>

弹出窗口代码

<script type="text/javascript">

function checkpost(){

if(form.user.value==""){ //验证表单用户名是否为空

alert("请填写用户名");

p.user.focus();
//指定光标位置

return flase;
//返回一个错误

}

if(form.pwd.value==""){

alert("请填写密码");

p.pwd.focus();

return flase;

}

return true; //通过验证

}

</script>

<h4 >用户登录</h4>

<div id="text">

<form name="form" method="post" onsubmit="return checkpost();">

用户名:<input type="text" id="user" /> </br></br>

密   码:<input type="text" id="pwd" /></br></br>

<button >登录</button>

</form>

</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: