<!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. SVN历史版本比较中文乱码

    将Workspace的编码改为UTF-8即可,详见上图:

  2. CollectionUtils.select 集合筛选

    import org.apache.commons.collections.CollectionUtils;import org.apache.commons.collections.Predicat ...

  3. C#基础之类型和成员基础以及常量、字段、属性

    首先吐糟一下今天杭州的天气,真是太热了!虽然没有妹子跟我约会,但宅在方寸大的窝里,也是烦躁不已! 接上一篇<C#基础之基本类型> 类型和成员基础 在C#中,一个类型内部可以定义多种成员:常 ...

  4. aspnetcore进程内托管的坑-非常规方法解决Log4Net不写日志的问题

    问题描述:Log4Net,本地测试一切正常,发布后,无法自动创建文件夹和日志文件,无法写入文件. 一.在项目中配置Log4Net 请参考我的上一篇博客 <aspnetcore配置log4net并 ...

  5. 022 Generate Parentheses 生成括号

    给 n 对括号,写一个函数生成所有合适的括号组合.比如,给定 n = 3,一个结果为:[  "((()))",  "(()())",  "(())() ...

  6. 完美解决百度地图MarkerClusterer 移动地图时，Marker 的Label 丢失的问题

    这篇文章来自http://www.cnblogs.com/jicheng1014   不好意思,那些rss 站太生猛了. 先吐槽一下百度地图的开发者,其实这个问题我绝对不是第一个遇到的人 很多人把这个 ...

  7. 【Java密码学】使用Bouncy Castle生成数字签名、数字信封

    Bouncy Castle(轻量级密码术包)是一种用于 Java 平台的开放源码的轻量级密码术包,它支持大量的密码术算法,并提供 JCE 1.2.1 的实现.最近项目上正好用到了Bouncy Cast ...

  8. 使用Fsharp 探索 Dotnet 平台

    Fsharp的交互开发环境使得我们在了解DotNet平台时能够快速的获得需要的反馈. 反馈在任何技艺的磨练过程中必不可少,我认为也是最重要的环节之一.在“一万小时天才理论”中,著名的髓鞘质就是在快速有 ...

  9. Ashx增删改查_动软

    1.首先展示列表 ashx 讲究的是个替换 这些就是属于ashx麻烦的地方 public void ProcessRequest(HttpContext context) { context.Resp ...

  10. ElasticSearch 处理自然语言流程

    ES处理人类语言 ElasticSearch提供了很多的语言分析器,这些分析器承担以下四种角色: 文本拆分为单词 The quick brown foxes → [ The, quick, brown ...