js实现弹出层

最新推荐文章于 2024-04-08 14:07:57 发布
最新推荐文章于 2024-04-08 14:07:57 发布
阅读量596 收藏
点赞数
分类专栏： Javascript 文章标签： JavaScript Firefox CSS HTML ViewUI

下面是一个JavaScript代码实现的弹出层效果

 

<html>  
  <head>  
    <style type="text/css">  
      #tranDiv {   
        position:absolute;   
        left:0px;   
        top:0px;   
      }   
      #tranDivBack {   
        position:absolute;   
        left:0px;   
        top:0px;   
        width:100%;   
        height:100%;   
        background-color:#000000;   
        filter:alpha(Opacity=30);   
        -moz-opacity:0.3;   
        opacity:0.3;   
      }   
      #infoDiv {   
        position:absolute;   
        left:0px;   
        top:0px;   
        width:100%;   
        height:100%;   
        text-align:center;   
      }   
      .pop_box {   
        background:#FFF;   
        padding:10px;   
        border:#666 8px solid;   
      }   
    </style>  
    <script language="javascript">    
      
      function showWindow(width,height){    
        location.href="#";     
        var windowstr= document.getElementById("popLayer").innerHTML;   
        document.getElementById("infoDiv").innerHTML=windowstr;    
        document.getElementById("infoDiv").style.left=((document.body.clientWidth-width)>0?(document.body.clientWidth-width):0)/2+"px";    
        document.getElementById("infoDiv").style.top=100+"px";    
        document.getElementById("infoDiv").style.zIndex=10001;   
        document.getElementById("infoDiv").style.width=width+"px";    
        document.getElementById("infoDiv").style.height=height+"px";    
        document.getElementById("tranDiv").style.height=document.body.clientHeight+ "px";    
        document.getElementById("tranDiv").style.width=document.body.clientWidth+ "px";    
        document.getElementById("tranDiv").style.display="";    
        document.getElementById("tranDivBack").style.display="";    
        document.getElementById("tranDivBack").style.zIndex=10000;   
        document.getElementById("infoDiv").style.display="";    
      }    
      function closeWindow(){   
        document.getElementById("tranDiv").style.display="none";    
      }
	   function changeVal() {
		var time = document.getElementById("time");
		time.value = "";
		//alert(document.getElementById("link").innerHTML);
	   }
	   function getVal() {
	    var time = document.getElementById("time").value;
		var patrn = /[0-9]/;
		if(!patrn.exec(time)) {
			alert("内容只能为整数，请重新输入！");
			return false;
		}
		if(time <= 0) {
			alert("设置时间应该大于0，请重新输入！");
			return false;
		}
		document.getElementById("link").innerHTML = time;
		//alert(document.getElementById("link").innerHTML);
		document.getElementById("timeVal").value = document.getElementById("link").innerHTML;
		alert(document.getElementById("timeVal").value);
		closeWindow();
	   }
    </script>  
  </head>  
  
  <div id="tranDiv" style="display:none;">  
    <div id="tranDivBack"></div>  
    <div id="infoDiv"></div>  
  </div>  
   
  <div id="popLayer" style="display:none;">  
    <div class="pop_box">  
		时间：<input type="text" value="小时（整数）" id="time" name="time" onClick="return changeVal();" /><br/>
		<input type="button" value="确定" onClick="return getVal();"/>
		<input type="button" value="关闭" onClick="return closeWindow();" />
    </div>  
  </div>  
  
	测试程序：<a id="link" href="javascript:showWindow(250,60);">时间</a> 
	<input type="hidden" id="timeVal" value="0" />
    
</html>

 注：document.getElementById("infoDiv").style.width在Firefox中必须为下面样式：

 

document.getElementById("infoDiv").style.width="180px"

 

必须加双引号

tk_zhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现弹出层效果
10-15
JavaScript 实现弹出层效果是前端开发中常见的一项任务，尤其在现代网页应用中，弹出层被广泛用于展示各种信息、用户交互和确认操作。本文将深入探讨如何使用 JavaScript 结合 HTML 和 CSS 来创建功能丰富的弹出层。...
弹出层详解
白天不懂夜的黑
01-14 3778
我看面经的时候，第一次遇到弹出层这个词，以前从来没有遇见过，上网看了看，没有一个是能说明白的，后来特意去看了很多的视频，下面就给大家详细解说下弹出层这个概念 弹出层和弹窗 我当初以为弹窗和弹出层是一个东西，后来也问了很多人，在广义上，他们确实相同。为啥这样说呢？ 因为二者都是点击一个按钮然后出来一个创建(多用于登录界面). 但是详细的来分，二者是有区别的！弹窗一般弹出来的窗口都是垂直居中于页面的，...
js实现一个弹窗div
baiqi123456的博客
09-08 4010
想实现一个这样的功能，点击一个删除按钮后，在当前页面弹出一个对话框，提示确定或取消，如果点击确定，则删除成功，如果点击取消则取消删除。
【JavaScript】三种方式入手JS弹窗
最新发布
2401_84092868的博客
04-08 1259
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。学不完的，最重要的是活着、不秃。
js案例---弹出div窗口
forever_zc的博客
12-01 2172
js简单案例
弹出层
weixin_40512519的博客
08-21 303
弹出层的介绍： 使用场景：注册、登录（表单基本校验）。统一的消息提示框（代替alert）。减少页面跳转、刷新的一些操作。 使用思路：1.遮罩层。2.弹出层窗口。都是通过div实现的。使用jQuery动态控制隐藏显示。                   我们还会对弹出层做简单的封装。让弹出层结构得到重复利用。 html:   &lt;!--弹出层遮罩、弹出层窗体是并列关系--&gt; ...
javascript实现弹出层
babulongbo的博客
08-10 4664
弹出层和弹窗相似但是并不相同；弹窗和弹出层都是由用户触发的显示提示信息的弹出面板；但是弹窗只是显示一些信息，没有太多的复杂的交互事件；而弹层类似一个整个页面，可以实现页面的所有功能； 现在前端弹层使用的很频繁，如支付宝支付弹层等…所以掌握弹层是一个很重要的技能。如果只是简单的隐藏和切换，当然就不必说，我要说的html+animate+es6实现弹层； ; html弹层结构： ...
使用JavaScript实现弹出层效果的简单实例
10-22
下面小编就为大家带来一篇使用JavaScript实现弹出层效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用js实现弹出层
01-21
总结：通过以上步骤，我们可以在JSP页面上使用JavaScript实现弹出层的显示、隐藏以及缓冲效果。弹出层是网页交互设计中的重要元素，合理的应用可以提高用户体验，而JavaScript的动态特性使得实现这些功能变得简单且...
原生js实现弹出层效果
11-27
1.遮罩层的宽度和高度是js获取页面的宽高（页面内容） //获取遮罩层(内容)的高度和宽度 var sHeight=document.documentElement.scrollHeight; var sWidth=document.documentElement.scrollWidth; 2.登录框设置...
使用原生JS实现弹出层特效
10-25
主要介绍了使用原生JS实现弹出层特效,需要的朋友可以参考下
分享123个JS特效弹出层，总有一款适合您
zy0412326的专栏
02-06 1298
JS
用js实现一个弹出图层
w2sft的博客
04-10 409
用js实现一个弹出图层
原生js如何创建弹出层
HEConfidence的博客
03-16 1745
我们会经常遇到需要点击按钮出现弹出层的情况，弹出层和弹窗是不一样的。下面就来讲讲我的创建弹出层的方法。 首先，创建一个按钮，为按钮绑定事件，点击按钮 ，打开弹出层。 <button id = "btn">打开</button> <script> var btn = document.getElementById('btn'); btn.onclick = function(){ openlayer(); } 接着构造函数，动态创建弹
layui框架学习（24：弹出层模块_消息框&提示框）
gc_2299的博客
05-25 8146
学习并记录了弹出层模块layer中最简单的提示框和信息框的用法及常用属性设置
Layui之弹出层
柚咖小窝
02-14 1万+
1
弹出层功能
酸菜鱼的博客
06-06 1010
开发工具与关键技术：VS+MVC 作者：茅凯翔 撰写时间：2019年6月5日 弹出层也就是你点击到某个按钮，便会弹出一个小窗口，只要内容不是大于页面的大小，就可以使用弹出层，就不用设置跳转页面那么麻烦。这个就是我设置好的一个弹出层，也叫模态框，里面有三个内容，属于比较小的模态框，是用于新增数据的一个小窗口。一般分两部分，一个是模态框头部，用于编写模态框的标题；一个是模态框主体，用于编写模态框的主...
【JavaScript】简单实现弹出窗口div
热门推荐
Lee的博客
12-08 1万+
JavaScript实现弹出窗口 思路 总体使用两个div，一个作为底层展示，一个做为弹出窗口； 两个窗口独立进行CSS设计，通过display属性进行设置现实与隐藏，此处建议使用display属性而不是visibility属性，visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，影响布局； 在js内设计两个onclick事件，分别指定函数，分别为开启弹窗和关闭弹窗。 一、设置两个div <html> <title>弹出窗口</t
js实现弹层
代码的专栏
07-10 580
弹出层效果 html, body {height:100%;} body, h2, p {margin:0px;padding:0px; font-size:12px;} body {font-size:12px; text-align:center; } .alert_backg {width:100%;height:100%;top:0px;left:0px;position:ab
js弹出层
05-31
你可以使用 JavaScript 实现弹出层，以下是一个简单的例子： 1. 首先在 HTML 中定义一个按钮，用于触发弹出层： ```html <button onclick="showPopup()">打开弹出层</button> ``` 2. 接着定义一个 div，作为弹出层的容器： ```html <div id="popup" style="display: none;"> <h2>这是弹出层</h2> <p>这是弹出层的内容</p> <button onclick="hidePopup()">关闭弹出层</button> </div> ``` 3. 在 JavaScript 中定义两个函数 showPopup 和 hidePopup，用于显示和隐藏弹出层： ```javascript function showPopup() { document.getElementById("popup").style.display = "block"; } function hidePopup() { document.getElementById("popup").style.display = "none"; } ``` 这样，当用户点击按钮时，弹出层就会显示出来；当用户点击弹出层中的关闭按钮时，弹出层就会隐藏起来。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值