div弹出窗口以及html弹出窗口

最新推荐文章于 2024-04-28 17:05:59 发布

梁柯一夏

最新推荐文章于 2024-04-28 17:05:59 发布

阅读量1.2k

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/ANI2010/article/details/38412437

版权

下面要说的是弹出窗口为网页和div两种形式。

一、要弹出的窗口为网页而非div

function openwindow(url,name,iWidth,iHeight)

{

var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的垂直位置;

var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置;

window.open(url,name'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'); //对弹出窗口的设置

}

</SCRIPT>

window.open的参数：（可参考DOM文档对象手册的open方法）

     'page.html'  弹出HTML文档的 URL 地址；
      'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空代替；
      height=100 窗口高度；
      width=400 窗口宽度；
      top=0 窗口距离屏幕上方的象素值；
      left=0 窗口距离屏幕左侧的象素值；
      toolbar=no 是否显示工具栏，yes为显示；
      menubar，scrollbars 表示菜单栏和滚动栏。
      resizable=no 是否允许改变窗口大小，yes为允许；
      location=no 是否显示地址栏，yes为允许；
      status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

然后onclick事件调用该函数，如下

二、要弹出的窗口为div

代码如下：

<html>

<head>

</head>

<body>

function showWin(){

var winNode = $("#win");

winNode.fadeIn("slow"); //利用jquery的fadeIn方法实现 #win窗口的淡入

}

function hide(){

var winNode = $("#win");

winNode.fadeOut("slow"); //利用jquery的fadeOut方法实现 #win窗口的隐藏

}

</script>

<div id="title">我是标题栏<input id="close" οnclick="hide()" TYPE='BUTTON' value="关闭"></input></div>

<div id="content">我是一个窗口</div>

</div>

</body>

<style>

#win{ border:1px #dddddd solid; width:300px; height: 200px; position: absolute; top: 100px; left:350p; display:none;}#title{ height:27px; background-color : #AEE8E2; color :#8D8D8D; padding-left: 3px;}

#cotent{ padding-left : 3px; padding-top : 5px;}

#close{ cursor: pointer; float: right; }

</style>

</html>

梁柯一夏

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
div弹出窗口以及html弹出窗口

下面要说的是弹出窗口为网页和div两种形式。一、要弹出的窗口为网页而非div function openwindow(url,name,iWidth,iHeight){ var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的垂直位置; var iLeft = (window.screen.ava
复制链接

扫一扫