添加遮罩弹窗

添加遮罩弹窗

css:

<style>
#headul{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  display: none;
}
.mask{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
}
.mask_content{
  width: 450px;
  height: 260px;
  background-color: #fff;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
  z-index: 99999;
  padding: 0px;
  text-align: center;
}
.mask_content h2{
  color: #da251c;
  font-size: 40px;
}
.mask_content a{
  margin-top: 30px;
  display: block;
  width: 300px;
  height: 70px;
  line-height: 70px;
  background-color: #da251c;
  color: #fff;
  text-decoration: none;

}
</style>

html:

<div class="headul" id="headul">
  <div class="mask"></div>
  <div  class="mask_content">
    <h2>恭喜您,激活成功!</h2>
    <a href="#">下一步</a>
  </div>
</div>

js:

<script>
  $(function(){
    $("#aaa").click(function(){
      $("#headul").show();
    })
  })
</script>

时间: 2024-11-13 10:10:26

添加遮罩弹窗的相关文章

遮罩弹窗

这里的这个遮罩有点问题,高度上没有全部遮罩住,当缩小浏览器屏幕的时候宽度也没有全部遮罩住 <style> body{margin:0;} /* body< html < 文档 */ body,html{height:100%;}/*兼容IE低版本,要设置body和html也为100%*/ .floats{position:absolute;top:0;left:0; width:100%; height:100%; background:#000; opacity:0.5;filt

背景为透明黑幕的遮罩弹窗

对整个页面进行透明黑色遮罩:单独显示一个框图,类似弹窗.用户可以看到整个页面,但只能对显示的框图内容进行操作:并且背景下的整个页面禁止用户操作. 代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>测试</title> 6 7 8 9 <style type="text/css"> 10

前端小结(3)---- 添加遮罩层,并弹出div

有如下div: <div id='pop-div' class="pop-box"> <div class="input-group has-info"> <input class="form-control" id="bankCode" type="text" placeholder="请输入银行卡号" /> <span class="

SystemUI添加Dialog弹窗

此弹窗为开机SystemUI的显示弹窗: 首先,在SystemUI的源码目录添加源码类文件,目录为frameworks/base/packages/SystemUI/src/com/android/systemui/settings,类名暂取为UpdateUI.java内容如下: /* * Copyright (C) 2008 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (t

微信中域名被封-页面添加遮罩层提示用户使用浏览器打开(或下载APP)

微信营销是网络经济时代企业或个人营销模式的一种.是伴随着微信的火热而兴起的一种网络营销方式.但是也正因为如此,微信官方的屏蔽封杀域名的规范的也越来越严格.商家与微信之间进行着微信防封防屏蔽和封杀较量,可以说微信在广告拦截,封杀方面几乎是苛刻的.任何有广告嫌疑或被举报基本都百分百进入封杀名单.从2019下半年的“拼多多”链接不再被开放绿色通道便能看出腾讯的果决. 但是即使在如此,在微信防封上面仍然还是有巨大突破的.今天我给大家分享几种微信防封的行之有效方案,以下方案基本涵盖了市面上所有的微信推广方

酷炫的鼠标滑过添加遮罩层效果

今天,没错又是今天,今天做的事情还真是多呢~还修了洗衣机,貌似除了写代码不行,样样都行了呢~ 好了,言归正传.今天在浏览一个网页时,鼠标滑过它的图片,出现了一种我感觉很酷炫的效果.像这样: 自己感受下~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&

前端页面给指定的div添加遮罩层,并且带有加载中的小旋转图片

话不多说,先上代码,其实还是比较简单的 1 $("<div id='shade' style='opacity:0.85;background:white'></div><img src='${ctx}/static/images/loading2.gif'/>").css({ 2 position:'absolute', 3 top:0, 4 left:0, 5 zIndex:300, 6 height:'100%', 7 width:'100%'

一个简单遮罩弹窗效果

<script> $(document).ready(function(){ // $(".n_ordinfo").hide(); $("#ordsure").click(function(){ $(".n_ordinfo").show(); //获取鼠标滚动高度 var $scrolhei=$(document).scrollTop(); //点击后添加div元素并设置其为绝对定位 $("<div id='bgwra

添加遮罩时禁止滚屏

写页面经常会遇到弹出层,为了突显弹出层,一般会设一个遮罩 <div class="mask"></div> 遮罩层的样式为: .mask{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: fixed; top: 0; left: 0; z-index: 998; display: none;} 可是这时会有一个问题,就是即使给遮罩层设为跟屏幕一样高一样宽,但一滚轮或手动时底