弹出层模式框

最新推荐文章于 2022-03-18 11:16:18 发布
最新推荐文章于 2022-03-18 11:16:18 发布
阅读量503 收藏
点赞数
分类专栏： CSS+HTMl+jsp+Fl.. 文章标签： function div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mmm123lmj/article/details/4444332
版权

 

<html>
<head>
<script>
var docEle = function() {
   return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id) {
   var m = "mask";
   if (docEle(_id)) document.removeChild(docEle(_id));
   if (docEle(m)) document.removeChild(docEle(m));
   // 新激活图层
   var newDiv = document.createElement("div");
   newDiv.id = _id;
   newDiv.style.position = "absolute";
   newDiv.style.zIndex = "9999";
   newDiv.style.width = "200px";
   newDiv.style.height = "300px";
   newDiv.style.top = "100px";
   newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中
   newDiv.style.background = "#EFEFEF";
   newDiv.style.border = "1px solid #860001";
   newDiv.style.padding = "5px";
   newDiv.innerHTML = "新激活图层内容";
   document.body.appendChild(newDiv);
   // mask图层
   var newMask = document.createElement("div");
   newMask.id = m;
   newMask.style.position = "absolute";
   newMask.style.zIndex = "1";
   newMask.style.width = document.body.scrollWidth + "px";
   newMask.style.height = document.body.scrollHeight + "px";
   newMask.style.top = "0px";
   newMask.style.left = "0px";
   newMask.style.background = "#000";
   newMask.style.filter = "alpha(opacity=40)";
   newMask.style.opacity = "0.40";
   document.body.appendChild(newMask);

   // 关闭mask和新图层
   var newA = document.createElement("a");
   newA.href = "#";
   newA.innerHTML = "关闭激活层";
   newA.onclick = function() {
    document.body.removeChild(docEle(_id));
    document.body.removeChild(docEle(m));
    return false;
   }
   newDiv.appendChild(newA);
}
</script>


</head>
<body>
<a href="#" οnclick="openNewDiv('newDiv');return false;">激活新层</a>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
</body>

</html>

来至：

http://hi.baidu.com/%BF%D7%B7%B1%E1%AA/blog/item/8875451061395006203f2ee1.html

roger_lmj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue弹出框遮罩层_1、VUE - 遮罩弹框公共组件
weixin_42188512的博客
01-13 3631
一、需求描述有些项目会频繁用到下图这种类型的遮罩弹框，最好的方法是封装为公共的组件，直接复用。image.pngimage.png二、方法：1、子组件：遮罩弹框通过父组件传参，来显示组件内容和样式。且"返回"、"确定"显示的个数也是取决于父组件的传参决定。2、父组件点击事件：传参，决定子组件样式，且监控子组件的 “返回”、“确定” 事件，决定遮罩弹框的显示还是取消显示，以及下一步操作。三、上代码这...
html底部弹出提示框,JS/CSS 在屏幕底部弹出消息
weixin_35815766的博客
06-05 2064
JS/CSS 在屏幕底部弹出消息#tip {visibility:hidden;width:400px;height:40px;border:1px solid black;text-align:center;padding:10px;background:black;color:white;border-radius:10px;line-height:40px;position:absolute...
SSM框架基于swagger2实现API管理
CatalpaFlat的博客
11-14 2403
SSM框架基于swagger实现API管理swagger官网： https://swagger.io/docs/ 1.添加maven依赖<!--swagger--> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>${swaggger.v
使用SSM框架编写数据的展示，双击编辑，单机下拉框
LoveJavatoo的博客
04-02 436
使用SSM框架编写电话簿 的数据显示 1.Contorller层的代码编写 2.service层的代码编写 3.TestServiceImpl实现service的接口 4.编写mapper和mapper.xml 5.前端接收到集合进行循环 双击进入编辑模式的前端代码 单机编辑下拉框 2.触发showing事件 3.进入div的域（div域写在table表单外面） ...
jQuery之弹出层
The_upside_of_down的博客
09-18 904
大家都知道弹出框，弹出提示、警告用alert、window都可以实现。但是如果让你点击一个事件后，弹出一个小小的界面，而不是一个提示框。我们应该如何实现？在我学习了jquery之后，发现jquery可以实现。但具体过程我还有点模糊，因此学习了别人的代码以及思路。 效果图如下： 通过效果图我们可以看到，第一个界面只有一个简单的点击弹出层的提示按钮，点击后弹出层弹出，...
layui弹出层html,layui弹出层效果实现代码
weixin_39756235的博客
06-07 982
本文实例为大家分享了layui弹出层的具体代码，供大家参考，具体内容如下弹出层大部分演示都在layer独立组件的官网，与内置的layer模块，用法是完全一致的特殊例子Tips：为了更清晰演示，每触发下述一个例子之前，都会关闭所有已经演示的层多窗口模式，层叠置顶配置一个透明的询问框示范一个公告层上弹出右弹出下弹出左弹出左上弹出左下弹出右上弹出右下弹出居中弹出Layui - 精心为你雕琢layui.u...
Layui数据表格&弹出层
weixin_50098749的博客
03-18 4261
什么是layui？ 经典模块化前端框架 ui框架,前端框架,JS组件 Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。 首先讲数据表格把我感觉layui得数据表格对我们后端开发人员是非常友好的所有有时间就看了看文档把他学会了 多看文档！ 主要还是数据表格 其他没用讲的必要 取镜像网站复制就行了 官方示例 l
Vue+layui多窗口弹出框
qq_41338901的博客
12-05 1189
Vue+layui多窗口弹出框
layui框架——弹出层layer
热门推荐
meixu568的专栏
07-26 9万+
两种调用方法： 1、引用独立的layer.js文件 引入好layer.js后，直接用即可 <script src="layer.js"></script> <script> layer.msg('hello'); </script> 2、调用layui中的layer模块 layui.use('layer', function(){ ...
layui弹出层提交表单！
Jarven_ma的博客
09-12 2万+
本文章使用layui框架，提交表单，如果使用其他的框架请右上角！ 首先设置弹出层如下图： layer.open({ type : 2, title : "信息編輯", area : [ '45%', '35%' ], shade : 0, sha...
layer弹出层框架alert与msg详解
08-31
Layer 弹出层框架 Open 是 Layer 中的一种弹出框组件，用于弹出自定义的弹出框。Open 均可以自定义样式、按钮、图标、动画等。 基本用法： layer.open({ type: 1, title: "open方式弹出层", //不显示标题栏 ...
layui 弹出层回调获取弹出层数据的例子
10-16
这里的`type: 2`表示弹出层为 iframe 模式，可以加载外部页面。`content`参数是弹出层显示的URL，`yes`参数是确定按钮的回调函数。 在`yes`回调函数中，我们可以通过`window["layui-layer-iframe" + index]....
jquery弹出层框架方便简单
11-10
例如，我们可以设置弹出层为全屏模式，并添加淡入效果： ```javascript $("#element").dialog({ fullScreen: true, openEffect: 'fade', openSpeed: 500, }); ``` 3. **交互功能** 弹出层不仅可以展示静态...
layui弹出层效果实现代码
08-30
在layer的API中，提供了许多方法来实现弹出层的效果，例如setTop方法可以实现层叠置顶，confirmTrans方法可以实现配置一个透明的询问框，notice方法可以实现示范一个公告层，offset方法可以实现上、右、下、左、左上...
底部弹出层
04-13
一个基本的底部弹出层（我们称之为“底部弹出框”或“footer modal”）通常包含以下HTML元素： 1. 容器：用来包裹整个底部弹出层的元素，例如`<div>`，并设置相应的类名以便于CSS选中。 2. 弹出层内容：包含需要...
Flex中动态获取 services-config.xml中配置的ChannelSet
Roger★L☆M☆J★
11-29 1930
Flex中动态获取 services-config.xml中配置的ChannelSet
在客户端(js)调用服务器端方法(C#)
Roger★L☆M☆J★
08-13 1582
 资源地址：http://hi.baidu.com/%BF%D7%B7%B1%E1%AA/blog/item/11712f11fd221dc1a6ef3fe6.html  在ASP.net 中，客户端(client side)调用服务器端(server side)方法，一般是使用客户端代码调用web服务进行，这样的情况下，我们需要建立一个新的web服务(asmx)来执行这项过程，如
JS获取radio和checkbox一系列html元素
Roger★L☆M☆J★
08-15 1280
 function openChildWindow(){var Str=aaa,bbb,ccc,ddd,;alert(Str);var stringArray=Str.split(,);for(var i=0;i{ alert(stringArray[i]);}alert("asdfa");window.open(searchuser,,toolbar,menubar,scr
网站建设--网页设计制作
Roger★L☆M☆J★
08-02 1233
网站建设是一个系统工程（内容策划、美工设计、软硬件系统结构设计、程序编写、数据库结构设计，网站优化推广等），网页设计只是网站建设的一个部分网站建设--做网站用到的软件：     Photoshop（网站设计稿用到）     Dreamweaver（编辑排版，写程序用来 asp / php / jsp）     Fireworks（也可以做设计稿主要还是裁图用）     Flash（网站

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值