js实现遮罩效果

js实现遮罩效果

html

最外层的modal负责包裹整个弹出层
modal-bg是灰色的遮罩
modal-show用来包含内容,内容可以分为三部分:header,content,footer

<div class="modal" v-bind:style="{display:isShow}">
    <div class="modal-bg" v-bind:style="{display:isShow}" @click="modalClose"></div>
    <div class="modal-show" v-bind:style="{display:isShow}">
      <div class="modal-header">
        <h3>{{title}}</h3>
      </div>
      <div class="modal-content">
	      我是123
	  </div>
	  <div class="modal-footer"></div>
    </div>
  </div>

css


  .modal {
    display: none;
  }

  .modal-bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.3;
    opacity: .30;
    filter: alpha(opacity=30);
  }

  .modal-show {
    display: none;
    position: absolute;
    top: 25%;
    left: 32%;
    width: 33%;
    height: auto;
    padding: 8px;
    border: 8px solid #E8E9F7;
    background-color: white;
    z-index: 1002;
    overflow: auto;
  }

  .modal-header {
    margin: 10px;
  }

  .modal-content {
    border: 1px solid lightgray;
    border-radius: 2px;
    text-align: left
  }

js调用

同时设置modal、modal-show、modal-bg的display为block即可显示,反之,同时设置为‘none’则隐藏。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值