JS+CSS实现带关闭按钮DIV弹出窗口的方法

本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<html>
<head>
<title>JS+CSS实现带关闭按钮的DIV弹出窗口</title>
<script>  
  function locking(){  
   document.all.ly.style.display="block";  
   document.all.ly.style.width=document.body.clientWidth;  
   document.all.ly.style.height=document.body.clientHeight;  
   document.all.Layer2.style.display='block'; 
   }  
  function Lock_CheckForm(theForm){  
   document.all.ly.style.display='none';document.all.Layer2.style.display='none';
  return false;  
   }  
    </script>
    <style type="text/css">
<!--
.STYLE1 {font-size: 12px}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
    <p align="center">
        <input type="button" value="弹出DIV" onClick="locking()" />
    </p>
    <div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
         z-index: 2; left: 0px; display: none;">
    </div>
    <!--          浮层框架开始         -->
    <div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/10);
         background-color: #fff; display: none;" >
        <table width="540" height="300" border="0" cellpadding="0" cellspacing="0" style="border: 0    solid    #e7e3e7;
             border-collapse: collapse ;" >
            <tr>
                <td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px;
                     font-weight: bold; font-size: 12px;" height="10" valign="middle">
                     <div align="right"><a href=JavaScript:; class="STYLE1" onclick="Lock_CheckForm(this);">[关闭]</a>     </div></td>
            </tr>
            <tr>
                <td height="130" align="center">
                </td>
            </tr>
        </table>
    </div>
    <!--  浮层框架结束-->
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • js实现点击按钮弹出上传文件的窗口

    js实现点击按钮弹出上传文件的窗口

    1.详细描述 在页面上设置一个"选择文件"按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script type="text/javascript"> function F_Open_dialog() {

  • javascript弹出窗口中增加确定取消按钮

    比例a标签点击后,弹出带确定与取消的窗口,点击确定则执行一个动作,否则不执行. 首先我们用ecshop 模板使用举例 {if $votings eq 1} <a href="javascript:;" onclick="if (confirm('多次投票将扣除100个积分,您确定投票吗?')) {vote_this({$item.id},{$item.cat_id});}else{return false;}" id="supportme15&quo

  • JS+CSS实现带关闭按钮DIV弹出窗口的方法

    本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS实现带关闭按钮的DIV弹出窗口</title> <script>     function locking(){      document.all.ly.style.display="block";      document.all.ly.sty

  • JS+CSS实现Div弹出窗口同时背景变暗的方法

    本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS实现的Div弹出窗口,同时背景变暗</title> <script>     function    locking(){      document.all.ly.style.display="block";      document.all.

  • js控制div弹出层实现方法

    本文实例讲述了js控制div弹出层实现方法.分享给大家供大家参考.具体分析如下: 这是个功能很好,且容易调用和控制的弹出层.感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出窗口(可拖动,背景灰色透明)</title&g

  • JS+CSS实现可拖动的弹出提示框

    本文实例讲述了JS+CSS实现可拖动的弹出提示框.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • js实现div弹出层的方法

    本文实例讲述了js实现div弹出层的方法.分享给大家供大家参考.具体分析如下: 话说现在各种插件出来了要实现弹出层真是太简单了,但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西,下面来给各位分享一个原生太js div弹出层实例,有需要的朋友可一起看看. 这个不用多说了,直接贴代码吧.有码有注释: 复制代码 代码如下: /*  * 弹出DIV层 */ function showDiv() { var Idiv     = document.getElementById("Idiv&quo

  • Android弹出窗口实现方法

    本文实例讲述了Android弹出窗口实现方法.分享给大家供大家参考,具体如下: 直接上代码: /** * 弹窗--新手指引 * @param cxt * @param id 资源编号 * @create_time 2011-7-27 下午05:12:49 */ public static void displayWindow(Context cxt, int id) { final TextView imgTV = new TextView(cxt.getApplicationContext()

  • JS实现定时自动消失的弹出窗口

    一.Demo.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js弹框3秒后自动消失</title> <link rel="stylesheet" type="text/css" href="./js/bootstrap/css/bootstrap.css" rel=&

  • JS弹出窗口代码大全(详细整理)

    如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,我们今天就来学习一下: 1.弹启一个全屏窗口 复制代码 代码如下: <html> <body http://www.jb51.net','我们','fullscreen');">; <b>www.jb51.net</b> </body> </html> 2.弹启一个被F11化后的窗口 复制代码 代码如下: <html&g

  • 超详细的JS弹出窗口代码大全

    如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,我们今天就来学习一下: 1.弹启一个全屏窗口 代码如下: <html> <body http://www.jb51.net','我们','fullscreen');">; <b>www.jb51.net</b> </body> </html> 2.弹启一个被F11化后的窗口 代码如下: <html> <bod

  • JS弹出窗口的运用与技巧大全

    本文详细介绍了JS弹出窗口的运用,非常具有实用价值,具体一起来看一下把. //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();</script>"); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write("<script>"); this.Response.Write(&qu

随机推荐