结合require.js jquery 制作弹框组件

来源：互联网发布：淘宝的evelom旗舰店编辑：程序博客网时间：2024/06/06 09:58

<!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="require.js" data-main="main"></script>
</body>
</html>

// main.js

// JavaScript Document
require(['jquery','po'],function($,c){
$('#a').click(function(){
new c.Window().alert({
title:'我是自定义标题1',
content:'我是自定义内容1',
handler:function(){
alert('我是写了函数的');
}, //函数
top:60, //自定义弹框和顶部距离
width:400, //自定义宽
height:200, //自定义搞
closeBtn:true, //自定义关闭按钮
skinClassName:'window_skin_a' //定制皮肤
});
});
});

// po.js

// JavaScript Document
define(['jquery'],function($){
function Window(){
this.cfg = {
title:'我是标题',
content:'我是内容',
handler:null,
width:500,
height:300,
top:0,
left:0,
skinClassName:null,
closeBtn:true,
mask:true
} //json
};
Window.prototype = {
alert:function(cfg){

var CFG = $.extend(this.cfg,cfg); //实例化出来的字典里面版自定义的内容覆盖 this.cfg里面的内容然后把他赋值给CFG;
console.log(CFG); //end

var boxDiv = $('<div class="window_boundingBox">'+ //把htmlappendTo到body里面
'<div class="window_header">'+CFG.title+'</div>'+
'<div class="window_body">'+CFG.content+'</div>'+
'<div class="window_footer"><input type="button" value="确定"></div>'+
'</div>');
boxDiv.appendTo($('body'));
console.log(boxDiv);//end

//增加遮罩
var mask;
if(CFG.mask){
mask = $('<div class="window_mask"></div>');
mask.appendTo($('body'));
}

//增加关闭按钮
if(CFG.closeBtn){ //如果CFG.closeBtn的值是存在的
var closeBtn = $('<span class="window_closeBtn">X</span>');
closeBtn.appendTo(boxDiv);
closeBtn.click(function(){
mask&&mask.remove();
boxDiv.remove();
});
}

//点击确定按钮关闭
var btn = $('.window_boundingBox').find('input');
btn.click(function(){
CFG.handler&&CFG.handler();
mask&&mask.remove();
boxDiv.remove();
});//end

//自定义宽高和位置
boxDiv.css({
width:CFG.width+'px',
height:CFG.height+'px',
left: CFG.left || ($(window).width()-CFG.width)/2+'px',
top: CFG.top || ($(window).height()-CFG.height)/2+'px'
});//end

if(CFG.skinClassName){//定制皮肤
boxDiv.addClass(CFG.skinClassName);
}//end

}
}
return {
Window:Window
}
});

0 0