点击弹出居中带有透明遮罩层窗口

最新推荐文章于 2020-08-16 18:10:52 发布
最新推荐文章于 2020-08-16 18:10:52 发布
阅读量860 收藏
点赞数
分类专栏： 前端js

本章节介绍一下如何点击一个按钮实现弹出一个居中窗口，并且此窗口带有半透明的遮罩层效果，此效果在当下比较流行，当然还有更为复杂的实现方式，当然效果也更为绚丽，下面介绍的代码能够简单实现此效果。

代码如下:

 
 

  
  

   
   

    
    
 
        

          01 
        
 
        

          02 
        
 
        

          03 
        
 
        

          04 
        
 
        

          05 
        
 
        

          06 
        
 
        

          07 
        
 
        

          08 
        
 
        

          09 
        
 
        

          10 
        
 
        

          11 
        
 
        

          12 
        
 
        

          13 
        
 
        

          14 
        
 
        

          15 
        
 
        

          16 
        
 
        

          17 
        
 
        

          18 
        
 
        

          19 
        
 
        

          20 
        
 
        

          21 
        
 
        

          22 
        
 
        

          23 
        
 
        

          24 
        
 
        

          25 
        
 
        

          26 
        
 
        

          27 
        
 
        

          28 
        
 
        

          29 
        
 
        

          30 
        
 
        

          31 
        
 
        

          32 
        
 
        

          33 
        
 
        

          34 
        
 
        

          35 
        
 
        

          36 
        
 
        

          37 
        
 
        

          38 
        
 
        

          39 
        
 
        

          40 
        
 
        

          41 
        
 
        

          42 
        
 
        

          43 
        
 
        

          44 
        
 
        

          45 
        
 
        

          46 
        
 
        

          47 
        
 
        

          48 
        
 
        

          49 
        
 
        

          50 
        
 
        

          51 
        
 
        

          52 
        
 
        

          53 
        
 
        

          54 
        
 
        

          55 
        
 
        

          56 
        
 
        

          57 
        
 
        
 
         
 
          <!DOCTYPE html> 
         
 
         
 
          < 
          html 
          > 
         
 
         
 
          < 
          head 
          > 
         
 
         
 
          < 
          meta  
          charset 
          = 
          " utf-8" 
          > 
         
 
         
 
          < 
          title 
          >遮罩层</ 
          title 
          > 
         
 
         
 
          < 
          style  
          type 
          = 
          "text/css" 
          > 
         
 
         
 
          #fade { 
         
 
         
 
             
          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=80); 
         
 
         
 
          } 
         
 
         
 
          #light{ 
         
 
         
 
             
          display:none; 
         
 
         
 
             
          position:absolute; 
         
 
         
 
             
          top:25%; 
         
 
         
 
             
          left:25%; 
         
 
         
 
             
          width:50%; 
         
 
         
 
             
          height:50%; 
         
 
         
 
             
          padding:16px; 
         
 
         
 
             
          border:3px solid orange; 
         
 
         
 
             
          background-color:white; 
         
 
         
 
             
          z-index:1002; 
         
 
         
 
             
          overflow:auto; 
         
 
         
 
          } 
         
 
         
 
          </ 
          style 
          > 
         
 
         
 
          < 
          script  
          type 
          = 
          "text/javascript" 
          > 
         
 
         
 
          window.onload=function(){ 
         
 
         
 
              
          var linkbt=document.getElementById("linkbt"); 
         
 
         
 
              
          var light=document.getElementById('light'); 
         
 
         
 
              
          var fade=document.getElementById('fade'); 
         
 
         
 
              
          var closebt=document.getElementById("closebt"); 
         
 
         
 
              
          linkbt.onclick=function(){ 
         
 
         
 
                
          light.style.display='block'; 
         
 
         
 
                
          fade.style.display='block'; 
         
 
         
 
              
          } 
         
 
         
 
              
          closebt.onclick=function(){ 
         
 
         
 
                
          light.style.display='none'; 
         
 
         
 
                
          fade.style.display='none'; 
         
 
         
 
              
          } 
         
 
         
 
          } 
         
 
         
 
          </ 
          script 
          > 
         
 
         
 
          </ 
          head 
          > 
         
 
         
 
          < 
          body 
          > 
         
 
         
 
          < 
          a  
          href 
          = 
          "javascript:void(0)"  
          id 
          = 
          "linkbt" 
          > 点击这里打开窗口</ 
          a 
          > 
         
 
         
 
          < 
          div  
          id 
          = 
          "light" 
          >< 
          a  
          href 
          = 
          "javascript:void(0)"  
          id 
          = 
          "closebt" 
          >关闭窗口</ 
          a 
          ></ 
          div 
          > 
         
 
         
 
          < 
          div  
          id 
          = 
          "fade" 
          "></ 
          div 
          > 
         
 
         
 
          </ 
          body 
          > 
         
 
         
 
          </ 
          html 
          >

以上代码实现了我们的要求，下面简单介绍一下它的实现过程。

一.实现原理:

在默认状态下，遮罩层和窗口都是隐藏不可见的，当点击链接之后，能够使窗口和遮罩层显示，并且将遮罩层设置为半透明状态。此两个元素都采用绝对定位同时设置居中窗口的z-index属性值大于遮罩层，这样就可以使其覆盖在遮罩层之上。当点击关闭按钮的时候，能够将遮罩层和窗口隐藏，原理大致如此。

Return_KB
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
弹出窗口并且此窗口带有半透明的遮罩层效果
09-04
主要介绍了如何点击一个按钮实现弹出一个居中窗口，并且此窗口带有半透明的遮罩层效果,需要的朋友可以参考下
js弹出div对话框（1，透明，2带拖动功能）
前端开发、简约至上！ - Html，Css，Js，Jquery ...
11-16 167
  （很好用的）js弹出div对话框（1，透明，2带拖动功能） JS DIV 弹出 &lt;html&gt; &lt;head&gt; &lt;script&gt; function sAlert(txt) { //var eSrc=(document.all)?window.event.srcElement:arguments[1]; var shield = document....
JQuery弹出窗口插件带透明遮罩层
玩火的稻草人的博客
02-07 1744
今天系统中用到了一个带蒙版的弹出窗口，找了一个JQuery的插件，用起来挺方便的，还不错，mark一下，顺便介绍给大家： 直接上代码吧 1、页面HTML文件 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>简单的jQuery弹出层插......
html实现弹框，并伴随遮罩层，且弹框居中
anq46684的博客
05-13 452
本文介绍的内容主要实现的功能有，出现弹框，并且伴随遮罩层，且弹框一直居中。 html和js代码： <div id="hidebg"></div> <div id="hidebox" onClick="hidebox();"> <div> <p class="box-...
遮罩层弹出半透明dialog
02-27
遮罩层弹出半透明dialog,很fashion。
jQuery点击按钮弹出遮罩层且内容居中特效
11-23
这篇文章主要讲解如何使用jQuery实现一个点击按钮后弹出遮罩层，并确保内容居中的特效。在Web开发中，这样的功能经常用于模态对话框或提示信息的展示。 首先，我们来看下HTML结构。HTML部分包括两个`<section>`元素...
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
12-11
在网页设计中，有时我们需要创建一个遮罩层和居中弹出层，以便在用户与页面交互时显示重要信息或提示。这篇文档介绍了一个使用JavaScript（JS）和Cascading Style Sheets（CSS）来实现这样的功能的方法。这个实现的...
弹出一个遮罩层有正在加载效果的文字
09-25
在网页开发中，有时我们需要在用户等待某个操作完成或数据加载时向他们展示一个提示，这时弹出一个带有“正在加载”效果的遮罩层就显得尤为重要。这种效果可以提供良好的用户体验，让用户知道系统正在进行后台处理，...
jQuery设置div居中及实现遮罩层
csdn_chenli
11-17 8619
jquer设置div居中级实现遮罩层 这里主要讲遮罩层 web前端开发，写网站静态页面时经常遇到些遮罩层和设置div（物体）居中。 这里又我自己写的一个实例，提供参考。 一、效果图 效果图1： 效果图2： 这两张图片看是没有什么区别，可以说做起来可就没那么容易咯（这个问题我可是弄了半天呢。） 第一张：内容比较少 ，只有获取浏览器的高度就可以 var sW=
弹出框透明背景(超简单实现)
iOSTianNan的博客
06-21 3946
弹出框透明背景(超简单实现)需求背景需要在页面中弹出一个view,背景颜色是灰黑色透明效果,上面展示另外一个view问题困扰单纯设置view的alpha值,会导致另外这个view的alpha同样改变,达不到效果 见图解决办法在xcode中 找到Background 选项,设置背景view的颜色,注意,这里设置的颜色是关键,不是单纯的纯色 设置见图 效果如图
遮罩窗口 - 给窗口增加半透明模糊遮罩
10-31
遮罩窗口 - 给窗口增加半透明模糊遮罩
html弹出框+遮罩层
04-17
看到网上有很多伙伴在求这东西，这里发一个。
居中悬浮广告
02-19
居中在底部的悬浮广告代码，代码简单移植性好！
在浏览器窗口上添加遮罩层的方法
12-04
如何在浏览器窗口上添加一个遮罩层 背景 在web2.0中，页面弹窗是一个很常见的交互方式，这样既可以避免不必要的页面跳转，也可以改进界面的布局和可交互性。 但是，浏览器原生的弹窗函数（alert, confirm, prompt）有着很大的局限性，主要是它们的展现UI一来很不美观，二来也不够灵活，因此，我们经常需要自行定义弹窗函数。 当我们要实现一个模式弹窗时（模式弹窗，即是说出现弹窗时，页面其它地方不可点击），通常的做法是用一个div将整个页面窗口遮挡住。 实现 下面，我们一步步地实现一种较为简洁有效的遮罩层： Step 1: 首先我们要考虑定义一个遮挡浏览器窗口的div，考虑下面一段htm
点击按钮，弹出一个可关闭的层窗口，网页背景变灰
06-22
点击按钮，弹出一个可关闭的层窗口，网页背景变灰
关于遮罩层+自定义弹出框的实现，透明度设置，子元素opacity不生效（不符合预期）问题的一点总结
lingliu0824的博客
08-16 3255
我们可能想要的到这样的效果
Qt之实现遮罩窗口
草上爬的博客
11-06 4719
原理很简单，就是在主窗口上覆盖一层半透明窗口，然后把需要遮罩显示的窗口（嵌入窗口）布局到该半透明窗口中网上很多实现方法是将主窗口截图绘制到遮罩窗口，然后再调用QPainter的fillRectr(rect(),QColor(0,0,0,100))来实现半透明效果，这种方法显然是不行的，因为这样的话就看不到主窗口中的动图了因此需要直接把遮罩窗口设置为半透明效果，这样就能看到主窗口中的动图，如效果图所示，遮罩时依然能看到滚动条和动图的动画效果设置遮罩窗口半透明的代码如下。.........
C/C++ 实现遮罩窗口
小乌龟的博客
08-14 2167
为什么会有这种需求？一般做做个的话是要使用模态对话框，模态对话框的父窗口会生成一个遮罩窗口，这就是用处，不让点击，可能就是这个一个简单的需求，我们要怎么样来实现？ 一个遮罩窗口的实现代码 .h文件 class MaskWindow : public QObject//we must use 'QWidget 'as base class { Q_OBJECT public: ...
遮罩层与模式窗口
　対苩
05-22 129
[code="html"] jQuery UI Example Page $(function(){ $('#dialog').dialog({ autoOpen: false, width: 600, ...
js+CSS弹出居中背景半透明div层实现教程
通过调整CSS的样式，可以自定义背景和弹出层的颜色、透明度以及尺寸，以适应不同的应用场景。同时，通过JavaScript，我们可以轻松地绑定事件，比如点击按钮或者超链接来触发弹出和关闭动作。 这个文档提供了一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值