点击文字或按钮弹出一个DIV窗口（DIV悬浮窗口）

最新推荐文章于 2024-02-26 18:05:27 发布
置顶 最新推荐文章于 2024-02-26 18:05:27 发布
阅读量9.3w 收藏 54
点赞数 20
分类专栏： DIV+CSS

以下是弹出窗口代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
        <title>点击文字弹出一个DIV层窗口代码</title> 
        <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=88); 
        } 
        .white_content { 
            display: none; 
            position: absolute; 
            top: 25%; 
            left: 25%; 
            width: 55%; 
            height: 55%; 
            padding: 20px; 
            border: 10px solid orange; 
            background-color: white; 
            z-index:1002; 
            overflow: auto; 
        } 
    </style> 
    </head> 
    <body> 
        <p>示例弹出层：<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p> 
        <div id="light" class="white_content">这是一个层窗口示例程序. 
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a></div> 
        <div id="fade" class="black_overlay"></div> 
    </body> 
</html>

u013239233
关注
  • 20
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
专栏目录
点击弹出浮动层 弹出遮罩层
07-21
点击弹出浮动层 弹出遮罩层 点击弹出浮动层 弹出遮罩层
点击页面其它地方隐藏该div
H3前端笔记
11-05 1241
思路一 第一种思路分两步 第一步：对document的click事件绑定事件处理程序，使其隐藏该div 第二步：对div的click事件绑定事件处理程序，阻止事件冒泡，防止其冒泡到document，而调用document的onclick方法隐藏了该div。 function stopPropagation(e) { if (e.
QT C++实现点击按键弹出窗口并显示图片/视频|多窗口应用程序的设计和开发
Yaoyao2024的博客
02-26 1909
一般用vs2019开发，创建Qt Widgets Application之后，会自带一个和项目名同名的主窗口类。这个时候需要手动创建另外一个，即新窗口类。要在Qt C++中实现点击按钮后显示新窗口，并在新窗口中显示由主程序生成的图片，你需要创建两个窗口类：主窗口类和图片显示窗口类。Tips:为了突出多窗口的实现，省略了与此无关的代码。函数，检测子线程启动，像主线程发送图片结果信号，函数负责让子窗口对象将图片在其窗口内展示。添加两个窗口类，一个是主窗口类。，另一个是显示图片的窗口类。类的实现（假设图片使用。
弹出居中的div层
yflxc的专栏
11-11 2209
点击文字弹出一个DIV层窗口代码                    .black_overlay{              display: none;              position: absolute;              top: 0%;              left: 0%;              width: 100%;         
js实现弹窗登录验证
热门推荐
hyty的博客
09-28 1万+
js实现弹窗登录验证 1.CSS隐藏的弹窗块 &amp;lt;style&amp;gt; #notClickDiv{ filter:alpha(Opacity=35);opacity:0.35; /*设置不透明度为35%*/ background:#000000; /*设置背景为黑色*/ position:absolute; /*设置定位方式为绝对位置*/ display:none...
用jQuery实现弹出窗口/弹出div层
dmtnewtons的专栏
08-29 1万+
原文链接：http://hi.baidu.com/awz_tiger/item/863cfc10c4bb0f6171d5e8d9 http://blog.163.com/qiuxinke2006@126/blog/static/24885580201131763139536/ http://hi.baidu.com/kilwin/blog/item/f4cfaf2695375920
点击文字弹出一个DIV层窗口代码
07-15
点击文字弹出一个DIV层窗口代码,下载就能用
如何创建一个JavaScript弹出DIV窗口层的效果
10-26
我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果
jQuery实现弹出窗口弹出div层的实例代码
10-20
主要介绍了jQuery实现弹出窗口弹出div层的实例代码,点击页面的链接，弹出一个div层，同时页面的其他部分变灰并且不能点击,，具体实现代码大家参考下本文吧
JS+CSS实现带关闭按钮DIV弹出窗口的方法
10-24
主要介绍了JS+CSS实现带关闭按钮DIV弹出窗口的方法,实例分析了div弹出层窗口的实现技巧,非常具有实用价值,具有一定参考借鉴价值,需要的朋友可以参考下
悬浮DIV层(javascript实现)
06-24
当页面滚动条滚动到某个高度时,div开始悬浮,当页面滚动到底部时停止浮动,高度记录为最后的浮动高度.
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
12-10
本文实例讲述了JS实现弹出浮动窗口。分享给大家供大家参考。具体如下： 这里介绍的JS弹出浮动窗口，支持鼠标拖动和关闭，点击链接文字后弹出层窗口，也称作是弹出式对话框吧。 关于一些参数说明： bodycontent:要在窗口中显示的内容 title:窗口的标题 removeable:窗口是否能拖动 注意：内容窗体的高度是height-30px，请计算好要显示的内容高度和宽度。 注:在火狐或chrome下效果最佳，IE8下可能有些小问题。 点击此处查看运行效果： http://demo.jb51.net/js/2015/js-float-window-mousemove-codes/ 运行效果图如
JavaScript点击按钮后弹出透明浮动层的方法
12-10
本文实例讲述了JavaScript点击按钮后弹出透明浮动层的方法。分享给大家供大家参考。具体分析如下： 这里实现点击后页面变灰色，并用JS弹出一个居中的浮动层提示窗口，这个窗口是透明的，可以设置透明度，网上已经有很多类似的JavaScript代码，你可以借鉴一下。 <HTML> <HEAD> <TITLE>浮动层居中的对话框效果演示</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> HTML { HEIGHT: 100% } BODY { HEIG
实现一个悬浮弹窗效果
Depressiom的博客
03-18 1174
html <!-- 弹窗 --> <div id="msg_alert" style="background-color: black;opacity: 0.4;top: 0%;margin: 0;padding: 0;width: 100%;height: 100%;position: absolute;z-index: 1001;" @click="closeMsg(1)"></div> <div id="alter_show" style="opa.
关于弹出div层居中的问题及解决方法
我不是大牛，我只是个搬运工！
04-03 4306
弹出div层在做网站中用到的也不少，但是如何尽可能的做到兼容各个浏览器的各个版本，这可是个大问题了，相信这也是大家头疼的问题。同一个方法在不同的浏览器得到的值是不同的，就拿document.documentElement.scrollTop来说吧。 ie下document.documentElement.scrollTop是不为0的； chrome下document.documentEleme
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告.docx
04-18
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告
网站界面设计mortal0418代码
04-18
网站界面设计mortal0418代码
PHP毕业设计-校园失物招领系统源码+数据库.zip
最新发布
04-18
PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可
vue 点击按钮弹出一个div窗体
06-01
好的，可以使用Vue的v-if指令和一个Boolean类型的数据来实现点击按钮弹出一个div窗体的效果。 具体实现步骤如下： 1. 在Vue实例中定义一个Boolean类型的数据，例如isShow，初始值为false，表示弹窗默认不显示。 2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值