<!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
}
});