js弹出层

C# Gooflow+layer弹出层 全js代码 C# Gooflow+layer弹出层 全js代码 阅读详情
/*
 * 弹出DIV层
*/
function showDiv()
{
var Idiv     = document.getElementById("Idiv");
var mou_head = document.getElementById('mou_head');
Idiv.style.display = "block";
//以下部分要将弹出层居中显示
Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2+document.documentElement.scrollLeft+"px";
Idiv.style.top =(document.documentElement.clientHeight-Idiv.clientHeight)/2+document.documentElement.scrollTop-50+"px";
 
//以下部分使整个页面至灰不可点击
var procbg = document.createElement("div"); //首先创建一个div
procbg.setAttribute("id","mybg"); //定义该div的id
procbg.style.background = "#000000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "fixed";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zIndex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "Alpha(opacity=70)";
//背景层加入页面
document.body.appendChild(procbg);
document.body.style.overflow = "hidden"; //取消滚动条
 
}
function closeDiv() //关闭弹出层
{
var Idiv=document.getElementById("Idiv");
Idiv.style.display="none";
document.body.style.overflow = "auto"; //恢复页面滚动条
var body = document.getElementsByTagName("body");
var mybg = document.getElementById("mybg");
body[0].removeChild(mybg);
}
<!--弹出层开始-->

 

<div id="Idiv" style="display:none; position:absolute; z-index:1000; background:#67a3d9;">
    <div id="mou_head" style="width="100px; height=10px;z-index:1001; position:absolute;">这个是用来实现拖层</div>
    <input type="button" value="关闭" onclick="closeDiv();" />
</div>
<!--结束-->


<select  style="width: 260px; margin-bottom: 6px;" name="sct_reason"  id="sct_reason"  onchange="saveMsgtotext();">
                                                        <option value="">您可以选择理由或者手动输入</option>
                                                        <option value="图像不清晰">图像不清晰</option>
                                                        <option value="资料不完整">资料不完整</option>
                                                        </select>
                                                        </div>
                                                        <div>



function saveMsgtotext() {
        var sct_reason = $("#sct_reason").val();
        if (sct_reason != "") {
            $("#ipt_reason").text(sct_reason);
        }
    }
使用JavaScript创建弹出层和覆盖层的技巧 综上所述,通过动态创建HTML元素并设置相应的样式属性,我们可以使用JavaScript来创建弹出层和覆盖层。在Web开发中,弹出层和覆盖层是常见的交互元素,用于在用户与页面进行交互时提供额外的信息或操作选项。本文将介绍如何使用JavaScript创建弹出层和覆盖层,并提供相应的源代码示例。可以通过创建一个全屏的半透明背景元素来实现覆盖层的效果。创建一个弹出层可以通过动态创建一个包裹内容的HTML元素,并设置其样式属性来实现。通过这种方式,我们可以同时显示弹出层和覆盖层,并实现交互效果。 阅读详情

相关推荐

MC Dialog js弹出层——跨浏览器兼容的JavaScript技巧

MC Dialog是一个轻量级的JavaScript插件,用于创建弹出层。它具有以下特点:跨浏览器兼容:MC Dialog能够在各种主流浏览器中正常运行,包括Chrome、Firefox、Safari、IE等。简单易用:使用MC Dialog只需要几行代码即可创建和控制弹出层。自定义性强:MC Dialog提供了丰富的配置选项,可以自定义弹出层的样式、大小、位置等。现在,让我们来看一下如何使用MC Dialog创建一个弹出层。

CodeWhizZ的博客 207

javascript实现弹出层

弹出层和弹窗相似但是并不相同;弹窗和弹出层都是由用户触发的显示提示信息的弹出面板;但是弹窗只是显示一些信息,没有太多的复杂的交互事件;而弹层类似一个整个页面,可以实现页面的所有功能; 现在前端弹层使用的很频繁,如支付宝支付弹层等…所以掌握弹层是一个很重要的技能。如果只是简单的隐藏和切换,当然就不必说,我要说的html+animate+es6实现弹层; ; html弹层结构: ...

babulongbo的博客 4834

接口操作MySQL跟MongoDB事务回滚问题

通常使用的事务注解:@Transactional 是不会对MongoDB生效的,但是在一些生产接口中无法避免同时使用MySQL跟MongoDB的操作。

weixin_45932023的博客 1579

原生js如何创建弹出层

我们会经常遇到需要点击按钮出现弹出层的情况,弹出层和弹窗是不一样的。下面就来讲讲我的创建弹出层的方法。 首先,创建一个按钮,为按钮绑定事件,点击按钮 ,打开弹出层。 <button id = "btn">打开</button> <script> var btn = document.getElementById('btn'); btn.onclick = function(){ openlayer(); } 接着构造函数,动态创建弹

HEConfidence的博客 1993

STM32F103ZE驱动PMW3901光流模块,从SPI配置到数据读取的完整避坑指南

本文详细解析了STM32F103ZE驱动PMW3901光流模块的全过程,从SPI配置、硬件连接到数据读取与处理,提供了完整的避坑指南。重点介绍了SPI参数配置、初始化序列优化、运动数据滤波等关键技巧,帮助开发者快速实现精准的光流检测。

weixin_42631411的博客 515

8.2-12.4GHz喇叭天线设计

使用后处理模板的优化算法,对a1、h_horn、b1进行优化,各参数的优化区间即为之前计算得到的参数范围。由于矩形喇叭的辐射特型基本上是E面和H面扇形喇叭的结合,当波导中只是单模传播(只有TE波)时,矩形喇叭的口径可以通过远场公式推理出来。表示矩形喇叭的口径效率,进行最佳增益设计时,一般取值为0.5。从表中可以看出,该结构在8.58GHz的增益误差为2.68%>2.5%,需要对结构进行优化。建模完成,之后就是在矩形波导尾部添加波导端口激励,以及对应频率的远场监视器。,在这里,将频率定为区间的中心频率。

qq_48897427的博客 6661

Vue 3-计算属性的getter,setter

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

Lin16819的博客 1043

AIDL HAL服务从零到一:构建现代Android硬件抽象层

本文详细介绍了从零开始构建现代Android AIDL HAL服务的完整流程。通过定义接口、实现服务逻辑、配置构建与VINTF清单,并最终集成到系统镜像,开发者可以掌握利用AIDL替代传统HIDL来开发硬件抽象层的核心方法。文章重点解析了AIDL HAL的创建流程,并对比了其与HIDL在语法、工具链和集成方式上的优势,帮助开发者高效构建稳定的硬件接口。

weixin_29174141的博客 145

分享123个JS特效弹出层,总有一款适合您

JS

zy0412326的专栏 1550

TT电机、310电机、370电机在智能小车与机器人中的性能对比与选型指南

本文深入对比了TT电机、310电机和370电机在智能小车与机器人项目中的核心性能差异。文章从尺寸、扭矩、转速、电压电流等关键参数入手,结合不同应用场景(如入门小车、竞技机器人、机械臂),提供了清晰的选型指南和驱动控制建议,帮助开发者根据项目需求选择最合适的电机方案。

weixin_29065015的博客 411

中兴交换机如何配置?有哪些常用的配置命令,本文值得收藏!

中兴交换机是一种常见的网络设备,用于构建和管理企业网络。它提供了丰富的功能和灵活的配置选项,使网络管理员能够根据特定需求进行定制化配置。本文将详细介绍中兴交换机的配置过程,包括登录、基本设置、VLAN配置、接口配置和安全配置等内容。

网络技术联盟站 1万+

Drop.js-实用的JavaScript下拉弹出层插件

Drop.js是一款JavaScript和CSS实用下拉弹出层插件。该插件基于Tether.js来定位弹出层,可以制作多种弹出层效果。

xsh80144242的博客 1018

从你的全世界路过---陌陌X-SIGN还原

我们上期介绍了hook 接口方式,今天我分析so 层。学习是为了复杂的事情简单化。不用如此繁琐。跟进native_sdbyecbu37x这个函数,我们f5看伪代码 v13 = sign(v9, v10, v11, a6); 跟进这个函数 代码如下(示例): 2.代码贴入 SHA消息摘要java代码如下: java 代码如下(示例): 总结 算法,结合动态调试!

任雪飘的博客 2303

html下拉框弹出层,Drop.js-实用的JavaScript下拉弹出层插件

Drop.js是一款JavaScript和CSS实用下拉弹出层插件。该插件基于Tether.js来定位弹出层,可以制作多种弹出层效果。它的特点还有:弹出层会在页面尺寸改变和滚动时自动更新位置。弹出层在页面滚动时使用GPU加速来定位。弹出层之间可以进行嵌套。弹出层可以在元素的12个位置上显示。可以自定义是在点击元素、鼠标滑过元素或元素聚焦时显示弹出层。使用方法由于该弹出层插件依赖于tether.js...

weixin_35728411的博客 517

Linux安装MinIO(图文解说详细版)

最近开个新坑,就是在linux环境中操作开发环境,带大家玩转Linux,会整理出一篇Linux的专栏,欢迎大家订阅!! 富贵同学linux环境为CentOS7.8 版本。 上期跟大家说了一下OpenJDK的安装,这次说一下minio的安装 第一步,进入/opt 目录,创建minio文件夹 cd /opt mkdir minio 第二步,wget下载安装包: wget https://dl.minio.io/server/minio/release/linux-amd64/minio 第三步,进入m

编码人生 5万+

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

html 原生弹出框,使用原生JS实现弹出层特效_javascript技巧

创建遮罩层代码如下:_createCover: function() {var newMask = document.createElement("div");newMask.id = this._mark;newMask.style.position = "absolute";newMask.style.zIndex = "100";_scrollWidth = Math.max(documen...

weixin_42513944的博客 1541

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

js 弹出层,以及在javascript里定义层样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-2.1.3.min.js"></script> </head> &...

weixin_30371469的博客 133

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

JS弹出层/窗口源代码收集

最近经常会用到这些东西,于是决定专门开一篇来收集关于弹出的好代码。。。。。。   1.测试后火狐可用,ie不可用 JS弹出层 body {margin:0px} #Loading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background:#eeeeee;widt

dududu01的专栏 2097

通过 JavaScript 实现弹出层的简单方式

文件结构 文件结构参照下图,忽略 .vscode 文件夹 说明 点击按钮出现弹出层 允许用户自定义弹出框内容 弹出层存在时隐藏滚动条并禁止滚动 点击弹出框的按钮或右上角的 X 关闭弹出层 效果图 下图为弹出前样式 下图为弹出层样式 HTML 结构 <!DOCTYPE html> <html lang="en"> <head> <meta...

中央单元 2631

JAVASCRIPT弹出窗口DIV层效果代码

在本教程中,我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果。   创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一。传统的JavaScript弹窗已经不适合目前网站的设计理念了,理由有二:首先,不友好——生硬的弹出对话框且伴随着“哐”的一声对用户体验是个很大的挑战;其次,兼容性不够强——有相当多的浏览器屏蔽了这种JS的

javagtcpp的专栏 3389

javascript弹出层

javascript简单的弹出层 window.onload=function(){ function setCss(_this,cssOption){ //设置元素样式 //判断节点类型 if(!_this||_this.nodeType===3||_this.nodeType

啊哈前端的专栏 1125

php实现页面弹出层,JavaScript_js与css实现弹出层覆盖整个页面的方法,本文实例讲述了js与css实现弹 - phpStudy...

js与css实现弹出层覆盖整个页面的方法本文实例讲述了js与css实现弹出层覆盖整个页面的方法。分享给大家供大家参考。具体实现方法如下:弹出层透明背景加框的常用样式和结构如下:.alertMessageBg{position:fixed;_position:absolute;width:100%;height:100%;left:0;top:0;background:#000;opacity:0....

weixin_34269309的博客 265

JavaScript实现弹出层代码

弹出层效果应该说很是常见了,下面是使用原生JavaScript实现弹出从的方法。好了,废话不多说了。一言不合就上代码。。弹出层js部分代码: 样式表代码如下: * { padding: 0; margin: 0; } html, body { font-size: 10px;

Dragon.G 3770

html 弹出层 特效,js登录弹出层特效

js登录弹出层 登录框特效body{background-color: #fff;}html, body{height: 100%;}html body{font: 12px Arial, Helvetica, sans-serif;color: #333333}html>body{font: 12px Arial, Helvetica, sans-serif;color: #333333}...

weixin_39929253的博客 176

使用JS实现弹出层

简单的测试页面 <!-- #dt_3 { cursor: pointer; } div#mbDIV { position: absolute; top: 0px; left: 0px; width: 100%; he

心静思远 3449

js实现简单弹出层功能

<!DOCTYPE html> <html lang='zh'> <head> <meta charset="utf-8"> <title>实现简易弹窗</title> <style> .box-modal{ display: flex; ...

buside的博客 2598
上一篇: EL表达式截取字符串
下一篇: 解析XML几种方式
justdoit_potato
博客等级 码龄11年 44粉丝 80原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值