vue 自定义动态弹框
<!DOCTYPE html>
<html >
<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 >
<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 ><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;
}
- 上一篇 »微信小程序 解决自定义弹出层滑动时下层页面滚动问题
- 下一篇 »bootstrap弹框