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

最新推荐文章于 2023-10-11 22:32:30 发布
置顶 最新推荐文章于 2023-10-11 22:32:30 发布
阅读量9.2w 收藏 54
点赞数 19
分类专栏： 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
关注
  • 19
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
专栏目录
如何创建一个JavaScript弹出DIV窗口层的效果
10-26
我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果
网页底部广告悬浮弹窗（css）
weixin_30576859的博客
04-12 2039
有的单页面需要添加广告等悬浮div。 部分代码： 　　　　<div class="flex"> 　　　　　　内容....　　　　　　 　　　　</div> 主要css代码： 　　　.flex{position: fixed;bottom: 0%;max-width: 640px;min-width: 320px;width: 100%;z-in...
js 实现浮窗
u013028240的专栏
10-08 267
js 实现浮窗
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
悬浮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/ 运行效果图如
弹出居中的div层
yflxc的专栏
11-11 2096
点击文字弹出一个DIV层窗口代码                    .black_overlay{              display: none;              position: absolute;              top: 0%;              left: 0%;              width: 100%;         
实现一个悬浮弹窗效果
Depressiom的博客
03-18 1042
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 4276
弹出div层在做网站中用到的也不少，但是如何尽可能的做到兼容各个浏览器的各个版本，这可是个大问题了，相信这也是大家头疼的问题。同一个方法在不同的浏览器得到的值是不同的，就拿document.documentElement.scrollTop来说吧。 ie下document.documentElement.scrollTop是不为0的； chrome下document.documentEleme
点击文字弹出一个DIV层窗口代码
07-15
点击文字弹出一个DIV层窗口代码,下载就能用
JS+CSS实现带关闭按钮DIV弹出窗口的方法
10-24
主要介绍了JS+CSS实现带关闭按钮DIV弹出窗口的方法,实例分析了div弹出层窗口的实现技巧,非常具有实用价值,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery实现弹出窗口弹出div层的实例代码
10-20
主要介绍了jQuery实现弹出窗口弹出div层的实例代码,点击页面的链接，弹出一个div层，同时页面的其他部分变灰并且不能点击,，具体实现代码大家参考下本文吧
jq完成弹出一个div，浮在其他内容之上，并且后面不可点击
小道仙的后宫
05-17 4561
功能描述：弹出一个div层，悬浮在其它的内容之上。除了这个悬浮的div，其它div不可以操作，直到关闭这个div。 一、图片展示效果 1、初始样子 2、点击 按钮 之后效果 3、点击关闭按钮（X）之后的效果 二、代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&gt...
div悬浮窗
weixin_33716154的博客
12-20 82
效果： source： <div class="r_nav" id="rightNavbox"> <ul> <li><a href="#" target="_blank">电脑整机</a></li> <li><a href=...
如何将div悬浮在另外一个div之上？
最新发布
qzh88888888的博客
10-11 127
如何将div悬浮在另外一个div之上？_vue3 div 悬浮定位-CSDN博客
js实现一个弹窗div
baiqi123456的博客
09-08 3513
想实现一个这样的功能，点击一个删除按钮后，在当前页面弹出一个对话框，提示确定或取消，如果点击确定，则删除成功，如果点击取消则取消删除。
js案例---弹出div窗口
forever_zc的博客
12-01 1834
js简单案例
鼠标放到控件上 DIV悬浮提示效果(四种)
如果可以，我愿争取
08-06 9573
图像效果演示 //--初始化变量-- var rT=true;//允许图像过渡 var bT=true;//允许图像淡入淡出 var tw=150;//提示框宽度 var endaction=false;//结束动画 var ns4 = document.layers; var ns6 = document.getElementById && !document.all;
vue 点击按钮弹出一个div窗体
06-01
好的，可以使用Vue的v-if指令和一个Boolean类型的数据来实现点击按钮弹出一个div窗体的效果。 具体实现步骤如下： 1. 在Vue实例中定义一个Boolean类型的数据，例如isShow，初始值为false，表示弹窗默认不显示。 2. 在模板中使用v-if指令绑定isShow数据，当isShow为true时，弹窗显示。 3. 在按钮上使用@click事件绑定一个方法，例如showPopup，当按钮被点击时，调用showPopup方法。 4. 在showPopup方法中，改变isShow的值为true，弹窗显示。 5. 在弹窗的关闭按钮上使用@click事件绑定一个方法，例如hidePopup，当关闭按钮被点击时，调用hidePopup方法。 6. 在hidePopup方法中，改变isShow的值为false，弹窗关闭。 示例代码如下： ``` <template> <div> <button @click="showPopup">点击弹出弹窗</button> <div class="popup" v-if="isShow"> <div class="popup-content"> <h2>弹窗标题</h2> <p>弹窗内容</p> <button @click="hidePopup">关闭弹窗</button> </div> </div> </div> </template> <script> export default { data() { return { isShow: false } }, methods: { showPopup() { this.isShow = true }, hidePopup() { this.isShow = false } } } </script> <style> .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; } .popup-content { background-color: #fff; padding: 20px; border-radius: 5px; } </style> ``` 这是一个简单的实现，你可以根据自己的需求进行修改和扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值