<!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. EIGRP-6-EIGRP数据包

    EIGRP在与邻居路由器进行通信时,使用以下7种不同类型的数据包:   Hello包 确认包 更新包 查询包 响应包 SIA查询包 SIA响应包   更新包,查询包,响应包,SIA查询包和SIA响应包 ...

  2. saltstack执行结果存储到MySQL

    saltstack执行结果保存到MySQL中,以便进行命令安全审计必须是python2.7以上的环境安装相关模块ubuntu系统安装 apt-get install -y python-mysqldb ...

  3. Zabbix之CentOS7.3下yum安装Zabbix3.5

    Zabbix特点介绍 (此介绍来源于https://www.zabbix.com/documentation/3.4/zh/manual/introduction/features) 概述Zabbix ...

  4. [Leetcode]005. Longest Palindromic Substring

    public String longestPalindrome(String s) { int start = 0, end = 0; for (int i = 0; i < s.length( ...

  5. Scala_Load csv data to hive via spark2.1

    code: package com.liupu import org.apache.spark.{ SparkContext, SparkConf } import org.apache.spark. ...

  6. GHOST来进行备份和还原及菜单介绍

    这篇文章主要说的是如何手工操作GHOST来进行备份和还原. GHOST的菜单及功能: 在主菜单中,有以下几项: l Local:本地操作,对本地计算机上的硬盘进行操作. l Peer to peer: ...

  7. python_sting字符串的方法及注释

    string类型是python内置的类型,无需安装   方法/属性 说明   capitalize()   把字符串的第一个字符改为大写   casefold()   把整个字符串的所有字符改为小写 ...

  8. Spark Mllib里的如何对两组数据用皮尔逊计算相关系数

    不多说,直接上干货! import org.apache.spark.mllib.stat.Statistics 具体,见 Spark Mllib机器学习实战的第4章 Mllib基本数据类型和Mlli ...

  9. 敏捷开发(Agile development)

    敏捷开发(Agile development) 敏捷开发是一种以人为核心.迭代.循序渐进的开发方法.在敏捷开发中,软件项目的构建被切分成多个子项目,各个子项目的成果都经过测试,具备集成和可运行的特征. ...

  10. ACdream 1431——Sum vs Product——————【dfs+剪枝】

    Sum vs Product Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Others) S ...