div弹出层

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量427 收藏
点赞数 1
文章标签： div function class xhtml javascript 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huming_h/article/details/5749431
版权

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" title="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title>js实现div层</title>

    <style type="text/css">

        .black_div

        {

            display: none;

            position: absolute;

            top: 0%;

            left: 0%;

            width: 100%;

            height: 100%;

            background-color: gray;

            z-index: 1001;

            -moz-opacity: 0.8;

            opacity: .80;

            filter: alpha(opacity=80);

        }

        .white_div

        {

            display: none;

            position: absolute;

            top: 20%;

            left: 10%;

            width: 80%;

            height: 150px;

            padding: 0px;

            border: 1px solid #aaabbbccc;

            background-color: white;

            z-index: 1002;

            overflow: auto;

        }

        .divTitle

        {

            font-size: 14px;

            color: White;

            font-weight: bold;

            background-color: #009900;

        }

        .divContent

        {

            margin-top: 30px;

        }

    </style>

    <script type="text/javascript" language="javascript">

        function opendiv(){

            document.getElementById('light').style.display='block';

            document.getElementById('fade').style.display='block';

        }

        function colsediv(){

            document.getElementById('light').style.display='none';

            document.getElementById('fade').style.display='none';

        }       

        function copyValue() 

        { 

           var strValue=document.getElementById("setUrl").innerText;

            if(isIE()) 

            {         

                clipboardData.setData("Text",strValue); 

                alert("您已成功复制了此地址"); 

            } 

            else 

            {             

                alert("仅支持IE，Sorry！"); 

            } 

        } 

        function isIE(number) 

        { 

            if(typeof(number)!=number) 

            { 

                return!!document.all; 

            }     

        } 

    </script>

</head>

<body>

    <p>

        <a href="#" οnclick="opendiv()">点击这里</a></p>

 

    <div id="light" class="white_div">

        <div class="divTitle">

            <table width="100%">

                <tr>

                    <td align="left" style="padding-left: 20px;">

                        标题：

                    </td>

                    <td align="right">

                        <span  style="float: right; padding-right: 30px; text-align: right;cursor: pointer" οnclick="colsediv()">关闭</span> 

                        <span  style="float: right; padding-right: 30px; text-align: right; cursor: pointer" οnclick="copyValue()">复制</span>

                    </td>

                </tr>

            </table>

        </div>

        <div class="divContent" id="setUrl">

            1：测试 2：继续测试 3：测试完毕

        </div>

         </div>

        <div id="fade" class="black_div">

        </div>

</body>

</html>

 

huming_h
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现div弹出层的方法
10-25
在JavaScript中，实现一个div弹出层是一项常见的任务，特别是在构建交互式Web应用时。本篇将详细解析如何使用原生JavaScript来创建一个功能完备的div弹出层，包括使其可拖拽、可关闭，并允许用户自定义显示效果。 ...
【JSP】模态窗口DIV显示层
hateson的专栏
10-14 2216
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 模态窗口DIV <!-- .black_overlay{
div 弹出层
12-31
在本案例中，"div弹出层"指的是使用`div`元素来实现的弹出窗口或对话框功能。这种技术广泛应用于各种网页交互场景，如信息提示、用户确认、表单提交等。 弹出层通常通过CSS（层叠样式表）来控制其外观，包括尺寸、...
js控制div弹出层实现方法
10-24
通过上述知识点的介绍和实现方案的阐述，我们可以看到，使用JavaScript控制div弹出层实现方法是一种实用的技术，可以有效地提升用户交互体验。在进行具体实现时，还需要注意细节处理和兼容性问题，以确保在不同...
DIV弹出层+定位
12-24
在这个“DIV弹出层+定位”的例子中，我们关注的是如何利用`DIV`来创建一个可滑动的弹出层，并且使其在页面上保持固定的位置。这种功能通常用于显示提示信息、模态对话框或者加载额外的内容。 首先，`DIV弹出层`是指...
div弹出层的ajax登录(Jquery版+c#)
10-27
Div弹出层是网页设计中常用的一种技术，用于创建在用户交互时动态显示或隐藏的浮动窗口。在本例中，它被用作一个登录界面，当触发某个事件（如点击按钮）时，弹出层会出现在网页的前景，展示登录表单。Div弹出层...
XHTML 简介
lly202406的博客
08-09 416
XHTML作为一种基于XML的标记语言，曾在一段时间内成为网页内容的标准格式。它的严格语法规则和良好的兼容性为网页设计和开发带来了便利。然而，随着HTML5的崛起，XHTML逐渐淡出了人们的视野。尽管如此，XHTML在推动网页技术发展方面所做出的贡献仍然值得我们铭记。
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 465
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 507
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 267
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
Electron学习与总结
song854601134的博客
08-12 201
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 420
注释很详细，直接上代码……
【无标题】
weixin_42348009的博客
08-14 114
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 894
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 475
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 1023
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
基于微信小程序的心理测评平台设计与实现
No_Name_Cao_Ni_Mei的博客
08-12 422
本文旨在设计与实现一个基于微信小程序的心理测评平台。该平台将提供心理测评问卷、分析报告和个性化建议等功能，旨在帮助用户了解自身心理状况并提供适当的改善方案。该平台将采用微信小程序作为开发平台，具备跨平台、便捷性等优势，能够满足用户在手机应用中进行心理测评的需求。本平台主要分为用户端和管理员端两个模块。用户端提供注册、登录、心理测试问卷填写等功能，同时可以生成个人心理分析报告和个性化建议。管理员端可以管理测试问卷、生成报告和建议，并管理用户信息和反馈意见。
基于vue框架的NBA球星管理系统1878g（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-12 998
随着互联网的普及和体育产业的蓬勃发展，篮球运动在全球范围内拥有庞大的粉丝群体，NBA（美国职业篮球联赛）作为其中的佼佼者，其球星更是备受关注。传统的球星信息管理方式往往依赖于纸质文档或简单的电子表格，这种方式不仅效率低下，难以实现数据的即时更新与共享，也无法满足球迷和媒体对球星信息深度挖掘的需求。因此，开发一套基于Vue框架的NBA球星管理系统，通过信息化手段整合球星信息，实现数据的快速录入、存储、查询与分析，对于提升管理效率、满足用户需求具有重要意义。，处理前端请求并提供业务逻辑。
Vue 标准开发方式与组件、插槽的高效使用
小刘哥的博客
08-10 311
Vue.js 是一个渐进式的 JavaScript 框架，适用于构建用户界面。本文将详细探讨 Vue.js 的标准开发方式，以及如何有效地使用组件、插槽等核心功能。
点击div实现弹出层效果
06-10
可以通过CSS和JavaScript实现点击div弹出层的效果，具体步骤如下： HTML部分： ```html <div id="myDiv">Click me!</div> <div class="overlay" id="overlay"> <div class="popup" id="popup"> <p>Hello, world!...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值