弹窗组件

最新推荐文章于 2024-03-17 16:35:36 发布

qq_19318067

最新推荐文章于 2024-03-17 16:35:36 发布

阅读量257

点赞数 1

分类专栏：模块化编程文章标签：组件模块化

本文链接：https://blog.csdn.net/qq_19318067/article/details/54286958

版权

模块化编程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{margin:0;padding:0}
@charset "utf-8";
/* CSS Document */
.window_boundingBox{
background:#fff;
z-index:10;
position:fixed;
border:1px solid #000;
box-shadow:0 0 12px rgba(0,0,0,.5);
}
.window_boundingBox input{
width: 100px;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -50px;
}
.window_header{
background:#333;
color:#fff;
text-align:center;
padding:5px;
font-soze:20px;
}
.window_body{
padding:10px;
}
.window_closeBtn{
position:absolute;
right:0;
top:0;
padding:5px 10px;
font-size:20px;
background:blue;
color:#fff;
cursor:pointer;
}
/*定制皮肤*/
.window_skin_a.window_boundingBox{}
.window_skin_a .window_header{ background:#f00;}
.window_skin_a .window_body{ }
/*定制皮肤*/
.window_mask{
width:100%;
height:100%;
background:#000;
opacity:.3;
position:absolute;
left:0;
top:0;
z-idnex:0;
}

</style>
</head>

<body>
<input type="button" id="a" value="点击"/>
<script src="jquery.js"></script>
<script src="po.js"></script>
<script>
$(function(){
var popWin = new Window();
$('#a').click(function(){
popWin.alert({
title:'我是自定义标题1',
content:'我是自定义内容1',
handler:function(){
alert('我是写了函数的');
}, //函数
top:60, //自定义弹框和顶部距离
width:400, //自定义宽
height:200, //自定义搞
closeBtn:true, //自定义关闭按钮
skinClassName:'window_skin_a' //定制皮肤
});
});});
</script>
</body>

</html>

// po.js 代码

(function(){