<!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. jmeter小问题解决方案合集

    问题1.在http请求,post的body中输入中文,显示乱码,怎么解决? 在jmeter的bin目录下,找到这个文件jmeter.properties,把jsyntaxtextarea.font.f ...

  2. Scala_Load csv data to hive via spark2.1_via pass parameters

    prepare csv: # vim /tmp/cars.csv year,make,model,comment,blank ","Tesla","S" ...

  3. vue——解决“You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. ”

    在build/webpack.base.conf.js文件中,注释或者删除掉:module->rules中有关eslint的规则 module: { rules: [ //...(config. ...

  4. poj(2406) kmp

    题目链接:https://vjudge.net/problem/POJ-2406 kmp学习:https://blog.csdn.net/starstar1992/article/details/54 ...

  5. python操作json文件

    import json class OperationJson(object): def __init__(self,file_name=None): if file_name: self.file_ ...

  6. Hive 环境的安装部署

    Hive在客户端上的安装部署 一.客户端准备: 到这我相信大家都已经打过三节点集群了,如果是的话则可以跳过一,直接进入二.如果不是则按流程来一遍! 1.克隆虚拟机,见我的博客:虚拟机克隆及网络配置 2 ...

  7. 【Linux】Xshell-Linux常用命令

    (1)命令ls——列出文件 ls -la 给出当前目录下所有文件的一个长列表,包括以句点开头的“隐藏”文件 ls a* 列出当前目录下以字母a开头的所有文件 ls -l *.doc 给出当前目录下以. ...

  8. Maven的学习资料收集--(五)使用Maven构建Struts2项目

    在前两篇博客中,使用Maven构建了Web项目,在这篇博客中写一下,怎样构建一个简单的Struts2项目. 在准备过程中发现,要使用好Maven,个人觉得要好好利用这两个网站: http://mvnr ...

  9. nodejs 实践：express 最佳实践系列

    nodejs 实践:express 最佳实践系列 nodejs 实践:express 最佳实践(一) 项目结构 nodejs 实践:express 最佳实践(二) 中间件 nodejs 实践:expr ...

  10. Spring之Quartz定时任务和Cron表达式详解

    1.定时业务逻辑类 public class ExpireJobTask { /** Logger */ private static final Logger logger = LoggerFact ...