我是把弹窗的html都写在了页面app里边。

图1 点击确认，隐藏弹窗

图2 点击取消隐藏弹窗 点击确认执行其他操作

1、html代码

<div class="layui-body"  id="app">  <div  ><button  @click="queren">显示确认框</button><button  @click="qshanchu">显示删除框</button></div>  <div class='zzc none'  :class="{'nonone':showzzc==1}">  <div class='confir' v-show="showts==1">    <h3>温馨提示</h3>	<p>确认要删除吗？</p>	<div class='del-btn-item'>	  <dl>	    <dd>		  <button type='button' class='confire_btn_no'   @click="hidetc">取消</button>		  <button type='button' class='confire_btn_yes' @click="isdelc">确认</button>	    </dd>	  </dl>    </div>  </div>  <div class='confir' v-show="showts==2">    <h3>温馨提示</h3>    <p>{{tis}}</p>    <div class='del-btn-item'>      <dl>	    <dd>		  <button type='button' class='confire_btn_yes_full confire_btn_yes' @click="hidetc">确认</button>	    </dd>	  </dl>    </div>  </div></div></div>

2、css代码

.zzc{position:fixed;width:100%;height:100%;z-index:111111;background-color:rgba(221,221,221,0.7);left:0;top:0;}.zzc .confir{position:fixed;border:2px solid #009688;z-index:222222;background: #FFF;left:50%;top:50%;border-radius:5px;width:350px;height:200px;margin-left:-175px;margin-top:-100px;}.zzc .confir h3{width:100%;text-indent:10px;font-size:16px;height:40px;line-height:40px;border-bottom:1px solid #DDD;}.confir  p{background:url(../images/icon_exc_small.gif)  no-repeat 30px center;height:80px;line-height:80px;display:block;width:100%;text-indent:120px;font-size:16px;}.confir  button{font-size:14px;padding:10px 30px;margin:0 5px;border:0;cursor:pointer;}.confir  .confire_btn_no{background:#F2F2F2;}.confir  .confire_btn_yes{background:#009688;color:#FFF;}.confir  .del-btn-item{margin-top:20px;}.confir  .del-btn-item dd{text-align:center;}.confir  .confire_btn_yes_full{width:calc(100% - 60px);margin:0 auto;}.none{display:none;}.nonone{display:block !important}

使用rgba直接设置background-color透明度，background-color:rgba(221,221,221,0.7)，0.7即为透明度

3、js代码

 new Vue({    el: '#app',    data(){		return {		  tis:'',           //提示内容		  showzzc:0,         //弹出框的显示，隐藏 。0 隐藏  1显示		  showts:0,          //1 弹出提示操作框  2 弹出提示确认框 		 }    },    methods:{    	  hidetc:function(){		        this.showzzc=0;	      },        isdelc:function(){			    //这里是删除的操作			    this.showzzc=0;//赋值为0， 隐藏弹出框	      },	      queren:function(){		      this.showzzc=1;		      this.showts=2;		      this.tis="你点击了显示确认框";	      },	      qshanchu:function(){		      this.showzzc=1;		      this.showts=1;	      },    }  })

说明：

在1中可以看到 使用的<div class='zzc none' :class="{'nonone':showzzc==1}"> 操作的是class ，而不是使用v-if 或者v-show，这是因为vue是在最后渲染，如果不加none，打开页面的时候，窗口有一个闪现的过程，这很明显不是我们想要的效果，如果加上none，v-if，v-show 就失去了作用；nonone 加上!important ，优先级高于none，让class='none'，失去了作用，达到我们想要的显示隐藏的效果；弹窗可能提示的内容不同，提示的信息直接读取基础数据tis的信息，例如：上传图片，可能会提示大小超出，格式不对；360急速浏览器在兼容模式下，vue都失效，没有解析；

解决办法如下：

第一步：在头部加载browser.min.js，

第二步：判断浏览器是否为ie浏览器

第三步：如果是ie，在vue的<script>处加上type="text/babel"

完整代码：

<script  type="text/javascript" >     if (!!window.ActiveXObject || "ActiveXObject" in window){		 document.write("<scri"+"pt src=\"/public/admin/js/art.js\" type=\"text/babel\"></s"+"cript>");     }else{		 document.write("<scri"+"pt src=\"/public/admin/js/art.js\" ></s"+"cript>");	 }</script>

我的vue的代码写在了art.js，主要就是判断是否ie，然后决定是否加上 type="text/babel"，如果不是ie，加上以后别的浏览器就不好用了。