返回首页 常用 JavaScript 网页特效

为弹出的窗口加入关闭按钮

实例说明

在弹出的窗口中加入关闭按钮,点击后弹出的窗口关闭。

技术要点

本实例主要应用 window 对象的 close()方法实现。close()方法的语法如下。

window.close()  

功能:window 对象的 close()方法用于自动关闭浏览器窗口。

实现过程

1.要弹出的窗口且是功能实现界面 New.html。

<html>  
<head>  
<meta charset="utf-8" />  
<title>弹出的窗口</title>  
<style type="text/css">  
body{  
    background-image:url(new.jpg);  
    background-repeat:no-repeat;  
    }  
</style>  
</head>  
<body>  
    <input type = "button" value = "关闭" onClick="window.close();"/>  
</body>  
</html>  

2.在 index.html 页面写上 JS 代码实现功能

<html>  
    <head>  
    <meta charset="utf-8" />  
        <script type="text/jscript" language="javascript">  
            window.open("new.html","new","height=280,width=800,top=10,left=20,resizable=no, location=no",false);  
        </script>  
        <style type="text/css">  
            p{  
                font-size:24px;  
                color:#F00;  
            }  
        </style>  
    </head>  
    <body>  
        <p>网站首页</p>  
    </body>  
</html>