<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>全屏弹框</title>

    <style type="text/css">

        #DialogsAlert{

            width:505px;

            background-color:#fff;

            text-align:center;

            font-size:14px;

            color:#767676;

            font-family:"microsoft yahei",simsun,Tahoma,sans-serif;

            display: none;

            z-index: 9999;

            position:fixed;

            top:28%;

            left:36%;

        }

        #DialogsAlert h2{

            height:40px;

        }

        .act_pop_title{

            background: #005C91;

            color:#ffffff;

            text-align: left;

            text-indent: 30px;

            line-height: 40px;

            height:40px;

        }

        .Dialogs-Close{

            width:40px;

            height:40px;

            right:-45px;

            top:0;

            position:absolute;

            background-position: -419px 3px;

            z-index: 5;

            background-color: #005c91;

            color: #ffffff;

            font-size: 32px;

            line-height: 32px;

        }

    </style>

</head>

<body style="height:2000px;width:2000px">

<input type="button" value="点击显示弹框或者小区弹框" onclick="DialogS();"/>

<div id="DialogsAlert" class="act_pop">

    <a href="javascript:DialogS()" title="关闭"><span class="Dialogs-Close">X</span></a>

    <h2 class="act_pop_title">全屏弹框哦</h2>

</div>

<script type="text/javascript">

    function DialogS(){

        if(!(document.getElementById("Dialogs"))) {

            var oHead = document.getElementsByTagName("body")[0];

            var oDiv = document.createElement("div");

            oDiv.id = "Dialogs";

            oDiv.style = "height:100%;width:100%;left:0;top:0;background:#ccc;position:fixed;filter:Alpha(opacity=50);opacity:0.5; -moz-opacity:0.5;";

            oHead.appendChild(oDiv);

            document.getElementById("DialogsAlert").style.display = "block";

        }else if(document.getElementById("Dialogs").style.display == "none"){

            document.getElementById("DialogsAlert").style.display = "block";

            document.getElementById("Dialogs").style.display = "block";

        }else{

            document.getElementById("DialogsAlert").style.display = "none";

            document.getElementById("Dialogs").style.display = "none";

        }

    }

</script>

</body>

</html>

　　

js实现全屏弹框的更多相关文章

  1. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  2. WPF Popup全屏 弹出方法。解决只显示75%的问题。

    WPF Popup全屏 弹出方法.解决只显示75%的问题.   WPF 中 Popup 有一个特点.当Popup的高度超过屏幕的75%的时候,只显示75%的高度. 如下代码: <Window x ...

  3. js控制全屏及退出全屏

    js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...

  4. fullpage.js jq全屏滚动插件

    fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下 ...

  5. 自己用js实现全屏滚动

    参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改 ...

  6. AnimatedModal.js – CSS3 全屏模态窗口

    AnimatedModal.js 是一个用来创建一个全屏模态窗口的 jQuery 插件,基于 CSS3 过渡实现.您可以利用 Animate.css 中的转换或自行创建自己的过渡效果.支持 Firef ...

  7. 兼容IE浏览器的js浏览器全屏代码

    众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: func ...

  8. js实现全屏

    详细内容请点击 1.window.open方式 第一种: 在已经打开的一个普通网页上,点击“全屏显示”,然后进入该网页对应的全屏模式.方法为:在网页的<body>与</body> ...

  9. SpriteBuilder全屏弹出菜单的特殊效果

    但是等一下!这里可以有更多.对于全屏的弹出菜单,你可以在显示弹出全屏菜单时朦胧化背景的level视图. 通过修改SpriteBuilder中的color节点的Color属性(比如修改为black)和O ...

随机推荐

  1. DOM操作标签，事件绑定，jQuery框架

    DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' 基本使用 动态创建一个标签 var 变 ...

  2. 使用用户名密码或ssl证书获取zabbix-api token，批量操作管理zabbix-server

    概述 Zabbix API 允许你以编程方式检索和修改 Zabbix 的配置,并提供对历史数据的访问.它广泛用于: 创建新的应用程序以使用Zabbix: 将Zabbix与第三方软件集成: 自动执行常规 ...

  3. 一文看懂 ZooKeeper ，面试再也不用背八股（文末送PDF）

    ZooKeeper知识点总结 一.ZooKeeper 的工作机制 二.ZooKeeper 中的 ZAB 协议 三.数据模型与监听器 四.ZooKeeper 的选举机制和流程 本文将以如下内容为主线讲解 ...

  4. 【Unity Shader学习笔记】Unity基础纹理-单张纹理

    1 单张纹理 1.1 纹理 使用纹理映射(Texture Mapping)技术,我们把一张图片逐纹素(Texel)地控制模型的颜色. 美术人员建模时,会在建模软件中利用纹理展开技术把纹理映射坐标(Te ...

  5. 「文化课 · 校园生活」街舞社演出 & 校园十佳歌手决赛

    女孩子跳舞很好看(流鼻血),男孩子跳舞很骚,跳的很有感觉.

  6. 软件性能测试分析与调优实践之路-JMeter对RPC服务的性能压测分析与调优-手稿节选

    一.JMeter 如何通过自定义Sample来压测RPC服务 RPC(Remote Procedure Call)俗称远程过程调用,是常用的一种高效的服务调用方式,也是性能压测时经常遇到的一种服务调用 ...

  7. 6月6日，HTTP/3 正式发布了！

    经过了多年的努力,在 6 月 6 号,IETF (互联网工程任务小组) 正式发布了 HTTP/3 的 RFC, 这是超文本传输协议(HTTP)的第三个主要版本,完整的 RFC 超过了 20000 字, ...

  8. c++ 乘法逆元

    主要参考:OI-WIKI 为什么要逆元 当一个题目让你求方案数时常要取余,虽然 \((a+b)\% p=(a\% p+b\% p)\%p\) \((a-b)\% p=(a\% p-b\% p)\%p\ ...

  9. 【抬杠C#】如何实现接口的base调用

    背景 在三年前发布的C#8.0中有一项重要的改进叫做接口默认实现,从此以后,接口中定义的方法可以包含方法体了,即默认实现.不过对于接口的默认实现,其实现类或者子接口在重写这个方法的时候不能对其进行ba ...

  10. 什么是Gerber文件？PCB电路板Gerber文件简介

    什么是Gerber文件: Gerber也叫"光绘",通常只代表一种格式如RS-274, 274D, 274X等,充任了将设计的图形数据转换成PCB制造的两头媒介,即一种CAD-CA ...