html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/myAlert.css"/>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script src="js/alertFunction.js"></script>
</head>
<body>
<div class="content">
<div class="sbt">
点击弹窗
<div class="border-lt">
</div>
<div class="border-rt">
</div>
</div>
</div>
<div class="he">
</div>
<div class="content">
<div class="sbt">
点击弹窗
<div class="border-lt">
</div>
<div class="border-rt">
</div>
</div>
</div>
</body>
<script>
$('.sbt').click(function(){
promptBox({
width:340,
contentHeight:102,
//time:1000,
confirmShow:'inline-block',
callback(data){
console.log(data)
}
})
})
</script>
</html>
css 代码
html,body{
font-size: 12px;
font-family: "微软雅黑";
}
*{
box-sizing: border-box;
}
button{
outline: none;
border: 0;
}
.content{
margin: 50px;
background: #B3D8FF;
padding: 20px;
}
.sbt{
display: inline-block;
width: 100px;
height: 32px;
border: 0;
background: #ef7777;
color: #FFFFFF;
outline: none;
cursor: pointer;
line-height: 32px;
text-align: center;
position: relative;
border: 1px solid #ef7777;
}
.border-lt{
height: 32px;
position: absolute;
right: -1px;
top: -1px;
width: 0;
border-left: 0px solid #FFFFFF;
transition: all linear 0.4s;
-webkit-transition: all linear 0.4s;
-ms-transition: all linear 0.4s;
-moz-transition: all linear 0.4s;
}
.sbt:hover .border-lt{
width: 101px;
border-left: 1px solid #FFFFFF;
}
.he{/*这个是为了撑高页面*/
height: 1000px;
}
.model{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
display: table;
z-index: 1000;
}
.modelClose{
}
.modelContent{
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.model-main{
background: #FFFFFF;
display: inline-block;
border-radius: 6px;
overflow: hidden;
animation: myfirst .2s;
}
.modelTitle{
height: 46px;
line-height: 46px;
background: #e5e5e5;
}
.btnContent{
height: 36px;
line-height: 36px;
padding: 0 36px;
}
.modelBtn{
width: 120px;
height: 36px;
border-radius: 18px;
color: #FFFFFF;
cursor: pointer;
font-size: 16px;
}
.confirmBtn{
background: #ed8027;
border: 1px solid #ed8027;
float: left;
}
.cancelBtn{
background: #d7d7d7;
border: 1px solid #d7d7d7;
float: right;
}
.modelBt{
height: 30px;
}
@keyframes myfirst{
0% {
opacity: 0;
-webkit-transform: scale3d(0.2,0.2,0.2);
-moz-transform: scale3d(0.2,0.2,0.2);
-ms-transform: scale3d(0.2,0.2,0.2);
transform: scale3d(0.2,0.2,0.2);
}
50% {
opacity: 0.5;
-webkit-transform: scale3d(0.5,0.5,0.5);
-moz-transform: scale3d(0.5,0.5,0.5);
-ms-transform: scale3d(0.5,0.5,0.5);
transform: scale3d(0.5,0.5,0.5);
}
100% {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
-moz-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
}
js代码
function promptBox(options){
var defaults={
content:'我是提示框的主体内容',
title:'提示框title',
confirmTxt:'确认',
confirmShow:'inline-block',
cancelTxt:'取消',
cancelShow:'inline-block',
contentHeight:'',//主体内容的高度
width:'',//整个弹窗的宽度
callback:'',
center:'center',//是否居中显示
time:'',//自动关闭弹窗
};
var $body=document.getElementsByTagName('body')[0]
$body.style.overflow='hidden'// 页面太长时 弹窗出现还是可以滚动 效果 不爽 直接body 超出的隐藏
var $wrap=document.getElementById('wrap')//这个是添加到页面中的弹窗
if($wrap){//有就删除 等哈下面在添加
$body.removeChild($wrap)
}
for(var key in options){//将传过来的参数替换默认的参数
defaults[key]=options[key]
}
//*****这种写法兼容ie10+ 不包括ie10*****//
//** ie10 不支持 es6的写法 如果 想要兼容的话 必须进行拼接*//
var html=`<div class="model">
<div class="modelContent">
<div class="model-main" style="width:${defaults.width}px">
<div class="modelTitle">
${defaults.title}
</div>
<div style="text-center:${defaults.center};height:${defaults.contentHeight}px;line-height:${defaults.contentHeight}px;">
${defaults.content}
</div>
<div class="btnContent">
<button class="confirmBtn modelBtn" style="display:${defaults.confirmShow}">${defaults.confirmTxt}</button>
<button class="cancelBtn modelBtn" style="display:${defaults.cancelShow}">${defaults.cancelTxt}</button>
</div>
<div class="modelBt"></div>
</div>
</div>
<div>`
var div=document.createElement('div')
div.setAttribute('id','wrap')
div.innerHTML=html
$body.appendChild(div)
var model=document.getElementsByClassName('model')[0]
$wrap=document.getElementById('wrap')
var confirmBtn=document.getElementsByClassName('confirmBtn')
var cancelBtn=document.getElementsByClassName('cancelBtn')
if(model){//点击模态框删除 当前元素的父元素的节点
model.onclick=function(e){
if(e.target.className=='modelContent'){//判断点击的是 哪个遮罩层
this.parentNode.parentNode.removeChild(this.parentNode)//删除节点
}
}
}else{
console.log('no')
}
if(defaults.time!=""){//时间不为空就是要自动关闭的
setTimeout(function(){
if($wrap){
$body.removeChild($wrap)
}
},defaults.time)
}
for(var i=0;i<confirmBtn.length;i++){//循环为确认按钮绑定点击事件
confirmBtn[i].onclick=function(){
if(defaults.callback!=''){
defaults.callback('这是回调函数的返回值')
}
}
}
for(var i=0;i<cancelBtn.length;i++){//循环为取消按钮绑定点击事件
cancelBtn[i].onclick=function(){
if($wrap){
$body.removeChild($wrap)
$body.style.overflow=''//关闭的时候 将这个属性取消 就可以继续滚动了
}
}
}
}