js实现全屏弹框
<!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实现全屏弹框的更多相关文章
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- WPF Popup全屏 弹出方法。解决只显示75%的问题。
WPF Popup全屏 弹出方法.解决只显示75%的问题. WPF 中 Popup 有一个特点.当Popup的高度超过屏幕的75%的时候,只显示75%的高度. 如下代码: <Window x ...
- js控制全屏及退出全屏
js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...
- fullpage.js jq全屏滚动插件
fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下 ...
- 自己用js实现全屏滚动
参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改 ...
- AnimatedModal.js – CSS3 全屏模态窗口
AnimatedModal.js 是一个用来创建一个全屏模态窗口的 jQuery 插件,基于 CSS3 过渡实现.您可以利用 Animate.css 中的转换或自行创建自己的过渡效果.支持 Firef ...
- 兼容IE浏览器的js浏览器全屏代码
众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: func ...
- js实现全屏
详细内容请点击 1.window.open方式 第一种: 在已经打开的一个普通网页上,点击“全屏显示”,然后进入该网页对应的全屏模式.方法为:在网页的<body>与</body> ...
- SpriteBuilder全屏弹出菜单的特殊效果
但是等一下!这里可以有更多.对于全屏的弹出菜单,你可以在显示弹出全屏菜单时朦胧化背景的level视图. 通过修改SpriteBuilder中的color节点的Color属性(比如修改为black)和O ...
随机推荐
- 有关状压DP
[以下内容仅为本人在学习中的所感所想,本人水平有限目前尚处学习阶段,如有错误及不妥之处还请各位大佬指正,请谅解,谢谢!] 引言 动态规划虽然已经是对暴力算法的优化,但在某些比较特别的情况下,可以通过一 ...
- 初学者都能懂得 Git 说明
初学者都能懂得 Git 说明 本文写于 2020 年 8 月 10 日 网上有很多非常优秀的 Git 教程,但是他们都是面向有一定基础的开发者的. 可是对于没什么基础的初学者甚至是偶尔操作代码的设计师 ...
- 理解ASP.NET Core - 发送Http请求(HttpClient)
注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或点击此处查看全文目录 前言 在.NET中,我们有很多发送Http请求的手段,如HttpWebRequest.WebC ...
- linux篇-图解cacti监控安装
1登录 admin admin 2点击devices localhost 3进入配置保存 4保存 http服务要启动哦 5一步步做 6graph tree 7执行/usr/bin/php /var/w ...
- 《Effective C++》阅读总结(四): 设计、声明与实现
第四章: 设计与声明 18. 让接口更容易被正确使用,不易被误用 将你的class的public接口设计的符合class所扮演的角色,必要时不仅对传参类型限制,还对传参的值域进一步限制. 19. 设计 ...
- 2021.05.05【NOIP提高B组】模拟 总结
T1 给你一棵树,要求增加最少的边权是的从根到每一个叶子的长度相等 不能改变原有的最大长度 这是一个贪心:尽可能往深度小的边增加 先预处理出 \(mx_i\) 表示从 \(i\) 到叶子的最大长度 然 ...
- XDEBUG 选项
到官网 http://www.xdebug.com/download.php 下载 找到对应PHP版本的 Xdebug ,后面带 TS 的为线程安全,本机环境为 win7 64 + php-5.5.1 ...
- Java上传文件至SFTP服务器
Windows搭建SFTP服务器 https://www.cnblogs.com/wangjunguang/p/9453611.html 注意点: 1.以管理员权限运行FreeSSHd 2.如果无法启 ...
- rosbag遍历数据出错:(unicode error) 'utf-8' codec can't decode byte 0xcd in position 31: invalid continuation byte
主题: 前言 针对ros系统记录的bag文件,可以使用python的rosbag包,按照不同起止时间和topic进行提取. 然而,有的topic可以使用rosbag读取,但是不能遍历,存在解码错误.原 ...
- 重学ES系列之变量的作用范围
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...