美文网首页
弹窗样式

弹窗样式

作者: 前端浅语 | 来源:发表于2020-02-04 21:25 被阅读0次
<div size="large" class="share" @click="showPop()">分享给关心的人</div>
<div class="popup" v-show="isShowPopup" @touchmove.prevent>
   <div class="mask" @click="close"/>
     <div class="popup_cont center">
       <!--弹窗的内容-->
       <img src="" alt="" class="tipimg">
      </div>
 </div>
 .popup {
   .mask {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1000;
      background-color: rgba(0, 0, 0, 0.7);
      overflow-y: hidden;
    }
    .popup_cont {
      box-sizing: border-box;
      position: fixed;
      z-index: 1001;
      width: 80%;
      opacity: 1;
      &.center{
        top: 20%;
        left: 50%;
        transform: translate(-45%, -50%)!important;
      }
      .tipimg {
        width: 100%;
        height: 30%;
      }
    }
  }
close() {
  this.isShowPopup = false
},
showPop() {
  console.log('wertyuio')
  this.isShowPopup = true
}

相关文章

  • 侧边弹窗

    遮罩层 html 遮罩层样式 侧边弹窗html 侧边弹窗css .list样式

  • 弹窗样式

  • modalPresentationStyle(modal弹窗)

    modalPresentationStyle是present弹窗的样式modalPresentationStyle...

  • 三种项目中很常见的提示小弹窗

    我们在开发项目的时候,可能会遇到各种样式的弹窗,并且每个项目的弹窗样式都会千差万别。但是不管他们的样式再怎么变化,...

  • app统一元素

    1. 弹窗 弹窗的样式统一 弹窗的显示和消失(代码调用次数),消失时机 2.列表 相同含义...

  • iOS自定义控件:弹窗控件封装

    弹窗控件封装,仿照微信的样式进行基础开发,并进行其他样式扩展。

  • SYAlertView弹窗视图

    SYAlertView自定义弹窗子视图UI根据UI设计需求,自定义各种样式的弹窗子视图: 自定义UI及样式 自定义...

  • APP页面提示样式小总结

    最近做交互总结,又碰到了页面弹窗提示的问题,于是便总结了下。 我按弹窗提示的样式分为了以下几种来进行说明。每种样式...

  • nexacro实现自定义弹窗

    1、先在一个独立的form中自定义好弹窗样式及内容 2、在想使用弹窗的界面中,找到要触发弹窗的事件中进行引入该弹窗...

  • 设计一个弹窗模块

    传入一个对象作为参数,用于设定弹窗的尺寸样式,设定弹窗的内容文本,并可以给弹窗设定按钮和回调函数。

网友评论

      本文标题:弹窗样式

      本文链接:https://www.haomeiwen.com/subject/dkbdxhtx.html