<!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. 理解js继承的6种方式

    想要继承,就必须要提供个父类(继承谁,提供继承的属性) 一.原型链继承 重点:让新实例的原型等于父类的实例. 特点:1.实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性.(新 ...

  2. Eclipse设置每行代码的长度

    打开 Window -> preferences -> java -> code style -> formatter -> edit -> line wrappi ...

  3. 06.Spring 资源加载 - ResourceLoader

    基本概念 ResourceLoader 接口,在 Spring 中用于加载资源,通过它可以获取一个 Resouce 对象. 内部构造 首先来看它的接口定义: public interface Reso ...

  4. tomcat的webapps下放置多个项目时会出现很多exception

    今天干了一件比较逗比的事,在tomcat的项目目录wepapps下又新建了一个文件夹backup,然后在backup下放置了之前项目的war包...然后启动tomcat的时候各种exception 大 ...

  5. EasyTouch3.16 初步使用

  6. less css用法思维导图

    Less 是一个Css 预编译器,可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,让你的Css更具维护性,主题性,扩展 ...

  7. Http中常见MIME类型

    MIME类型 常见MIME类型: 超文本标记语言文本 .html text/html xml文档 .xml text/xml XHTML文档 .xhtml application/xhtml+xml ...

  8. Python3基础（3）集合、文件操作、字符转编码、函数、全局/局部变量、递归、函数式编程、高阶函数

    ---------------个人学习笔记--------------- ----------------本文作者吴疆-------------- ------点击此处链接至博客园原文------ 1 ...

  9. java多线程处理任务

    最近用到使用多线程处理给用户发送站内消息的问题,想到使用java自带的线程池进行处理这个问题,具体如下: 定义一个线程: package com.qlwb.util; import org.apach ...

  10. orcale开篇

    1.数据库系统和数据库的管理系统  数据库系统=数据库的管理系统+oper操作员+硬件2.Oracle的版本  8i/ 9i 10g/11g  12c(cloud)3.实例和数据库的关系  实例:数据 ...