<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
 
<div id="modal-overlay">
<div class="modal-data">
<p></p>
<p>一个很简单的模态对话框 </p>
<p>点击<a onclick="overlay()" href="">这里</a>关闭</p>
</div>
</div>
 
<a href="#" onclick="overlay()">显示模态对话框</a>
<style>/* 定义模态对话框外面的覆盖层样式 */
#modal-overlay {
visibility: hidden;
position: absolute; /* 使用绝对定位或固定定位 */
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
background-color: #333;
opacity: 0.5; /* 背景半透明 */
 
}
/* 模态框样式 */
.modal-data{
width:324px;
height:220px;
border-radius: 10px;
position: absolute;
top:50%;
left:50%;
margin-top:-110px;
margin-left:-162px;
/* transform: translateX(-50%);
transform: translateY(-50%); */
background-color: #fff;
border:1px solid #000;
text-align:center;
}</style>
<script>function overlay(){
var e1 = document.getElementById('modal-overlay');
e1.style.visibility = (e1.style.visibility == "visible")? "hidden" : "visible";
}</script>
</body>
</html>
 
 
open.js
 
Vue.prototype.open = function( content ){//提示框信息
　$(".main-wrap").append(
　　'<div id='openlay'><div class="opendata"><p>‘+ content +’</p><p class="ik">点击关闭</p></div></div>'
　　)　
　　$(".ik").on("click",function(){
　　　　$("#openlay").remove()
　　})
}
//样式
 
//遮罩层
#openlay{
　　position:absolute;
　　left:0;
　　top:0;
　　width:100%;
　　height:100%;
　　text-align:center;
　　background-color:rgba(0,0,0,0.3);
}
//
.opendata{
　　width:324px;
　　height:220px;
　　border-radius:10px;
　　position:abaolut;
　　left:50%;
　　top:50%;
　　margin-top:-110px;
　　margin-left:-162px;
　　background-color:#fff;
　　text-algin:center;
}

vue 自定义动态弹框的更多相关文章

  1. vue自定义插件-弹框

    <template> <transition name="msgbox"> <div v-if="show" class=&quo ...

  2. JavaScript实现自定义alert弹框

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh0AAAFkCAYAAACEpYlzAAAfj0lEQVR4nO3dC5BddZ0n8F93pxOQCO

  3. CodePush自定义更新弹框及下载进度条

    CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装 ...

  4. vue移动端弹框组件，vue-layer-mobile

    最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...

  5. 自定义alert弹框，title不显示域名

    问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...

  6. WPF 如何自定义一个弹框

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 简述: 手工以原生Grid的方式,自定义了一个仿弹窗效果,优点可以自定义,缺点需要自己实现以及维护整个弹窗的效 ...

  7. Vue 自定义全局消息框组件

    消息弹框组件,默认3秒后自动关闭,可设置info/success/warning/error类型 效果图: 文件目录: Message.vue <template> <transit ...

  8. 自定义alert弹框，title不显示域名(重写alert)

    问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...

  9. vue移动端弹框组件

    最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...

随机推荐

  1. Linux之数据库

    crm 1.一定得会用linux发行版 centos 熟悉各种linux命令 2.你的确保linux服务器可以上网 , 一定得有ip地址,且确保dns解析正常 /etc/resolv.conf 3.上 ...

  2. JavaScript高级程序设计第三版-读书笔记（1-3章）

    这是我第一次用markdown,也是我第一次在网上记录我自己的学习过程. 第一章 JavaScript主要由以下三个不同的部分构成 ECMAScript   提供核心语言功能 DOM     提供访问 ...

  3. BZOJ4552（二分+线段树）

    要点 序列是n个不同的数,则新学到的一种策略就是二分这个位置的答案,然后可以上下调. 神奇地只关注大于还是小于mid并赋值0.1,这样m个操作的排序就能用线段树维护了! #include <cs ...

  4. java防止表单重复提交的几种方法

    转载大神 1. 使用session同步和token机制来防止并发重复提交 https://blog.csdn.net/hejingyuan6/article/details/50487777 2. S ...

  5. 使用 dbutils 的结果集包装类 StringTrimmedResultSet

    1.功能 StringTrimmedResultSet 的功能是去掉结果集中数据的前后空格,这个方法是在取结果的时候处理. 2.使用 一般在新建 QueryRunner 对象的时候使用: QueryR ...

  6. Silverlight 密码框 Focus

    在做一个例子是需要运行起来后焦点默认设置在密码框上,在网上查了资料 自己找到一种方法,此方法在oob模式下管用 public Login() { InitializeComponent(); txtL ...

  7. Eclipse中mybatis的xml文件没有提示，出现the file cannot be validated as the XML definition.....

    1.下载dtd文件 2.在eclipse中配置本地dtd文件: Window->Preferences->XML->XML Catalog->User Specified En ...

  8. Gym 100971D Laying Cables 二分 || 单调栈

    要求找出每个a[i],找到离他最近而且权值比它大的点,若距离相同,输出权利最大的那个 我的做法有点复杂,时间也要500+ms,因为只要时间花在了map上. 具体思路是模拟一颗树的建立过程,对于权值最大 ...

  9. HDU 5773 The All-purpose Zero 脑洞LIS

    给定一个序列,里面的0是可以任变的.问变化后最长的LIS的长度 首先,0全部选上是不亏的.这个不知道怎么说,YY一下吧. 最关键的就是解决2 0 0 3 这种问题了. 注意到这个序列的LIS应该是3 ...

  10. Entity Framework小知识

    记录在使用EF中使用的技巧,以备查阅. 1.当需要查询一个列总和的时候,如果列是允许NULL或者未查到信息的时候,想要返回的是0 而非NULL时 db.表名.Sum(p=> (decimal?) ...