html中div弹出显示

代码如下：

<!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"><head><title>弹出层</title><meta charset="utf-8"><script src="js/jquery-1.11.0.js" type="text/javascript"></script><style>.black_overlay {display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index: 1001;-moz-opacity: 0.8;opacity: .80;filter: alpha(opacity=80);}.white_content {display: none;position: absolute;top: 10%;left: 10%;width: 80%;height: 80%;border: 16px solid lightblue;background-color: white;z-index: 1002;overflow: auto;}.white_content_small {display: none;position: absolute;top: 20%;left: 30%;width: 40%;height: 50%;border: 16px solid lightblue;background-color: white;z-index: 1002;overflow: auto;}</style><script type="text/javascript">//弹出隐藏层function ShowDiv(show_div, bg_div) { document.getElementById(show_div).style.display = 'block'; document.getElementById(bg_div).style.display = 'block'; var bgdiv = document.getElementById(bg_div); bgdiv.style.width = document.body.scrollWidth;  // bgdiv.style.height = $(document).height();$("#" + bg_div).height($(document).height());};//关闭弹出层function CloseDiv(show_div, bg_div) { document.getElementById(show_div).style.display = 'none'; document.getElementById(bg_div).style.display = 'none';};</script></head><body><input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" /><!--弹出层时背景层DIV--><div id="fade" class="black_overlay"></div><div id="MyDiv" class="white_content"><div style="text-align: right; cursor: default; height: 40px;"><span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span></div>目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。</div></body></html>

效果图：

html中div弹出显示相关推荐

html鼠标可拖动窗体,javascript div 弹出可拖动窗口
javascript div 弹出可拖动窗口更新时间:2009年02月26日 21:50:37 作者: 创建弹出div窗口. /* * 创建弹出div窗口. 1.接口说明:DivWindow(i ...
vue框架elemnet-ui中Popover弹出框的使用
vue框架elemnet-ui中Popover弹出框的使用 ** 一.如何修改内置的el-popover样式(亲测有效) ** 1.在vue页面文件中使用el-popover组件时,在style标签中 ...
Web开发中的弹出对话框控件介绍
Web开发中,目前由于Jquery的大行其道,因此很多弹出对话框,都用到了Jquery技术,反而原始的弹出对话框的方式较为少用了.不过基于JQuery的方式实现对话框窗口弹出,也有很多控件可以利用,由 ...
Android监听系统输入法键盘弹出显示与隐藏事件
Android监听系统输入法键盘弹出显示与隐藏事件有时候需要监听Android系统输入法的弹出显示事件,比如:微信聊天时,不管你当前在聊天中的什么位置(上滑查看消息历史),每当你点击输入框时,都会自 ...
html里左flash广告,网页中定时弹出一个Flash广告
网页中定时弹出一个FLASH广告的网页特效代码.过一定时间自动消失.当打开页面时,加载的FLASH广告在页面内容的上面播放显示,位置默认设置为屏幕的中间(可自行修改其播放位置),待FLASH广告播放完 ...
如何在Mac上的 Safari 浏览器中阻止弹出式窗口？
当我们使用Mac电脑上的safari浏览器访问网站时,发现有些网站会有很多弹出式窗口或不必要的内容会出现在浏览器中.为了节省流量和时间,可以在Safari浏览器设置阻止弹出式的窗口.那我们该如何设置呢 ...
jquery weui 中alert弹出框在ios中跳动问题
问题描述: jquery-weui中的弹出框在ios上会有一个右下角向中间滑动的效果,在Android上没有这个效果. 解决方法: 修该jquery-weui.js中的openModal方法如下图: ...
html悬浮弹窗后面背景变深,JS+CSS实现Div弹出窗口同时背景变暗的方法
本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: JS+CSS实现的Div弹出窗口,同时背景变暗 function locki ...
css关闭窗口按钮的代码,JS+CSS实现带关闭按钮DIV弹出窗口的方法
这篇文章主要介绍了JS+CSS实现带关闭按钮DIV弹出窗口的方法,实例分析了div弹出层窗口的实现技巧,非常具有实用价值,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了JS+CSS实现带关 ...
element-ui中$confirm弹出框的确定和取消按钮互换位置
element-ui中$confirm弹出框的确定和取消按钮互换位置 (1)定位元素 (2)找到元素class,通过flex布局,进行位置更换 (3)app.vue中进行全局修改 /* 确认窗取消 ...

html中div弹出显示

html中div弹出显示相关推荐

最新文章

热门文章