一、dialog.js
定义类（生成二级弹出层互不影响）function
Dialog
(obj) {
var
_this
=
this
;//和别的函数this区分
}
obj为index.js传入参数
this
.
$dialogMask
=$(
'<div class="dialog-mask"></div>'
).
on
(
'click'
,
function
() {
remove
(
_this
);
});
生成遮罩层，点击遮罩层时，调用remove函数（移除遮罩层和弹层）
this
.
$dialogBox
=$(
'<div class="dialog-box">'
).
css
({
width
:obj.
width
,
height
:obj.
height
,
background
:obj.
background
});
生成弹层，定义设置css属性（传参）
this
.
$dialogTitle
=$(
'<div class="dialog-title">'
);
this
.
$dialogContent
=$(
'<div class="dialog-content"></div>'
).
load
(obj.content);
//load()用来使用html片段 （index.js中添加属性
content
:
"login.html"
）
this
.
$dialogH2
=$(
'<h2>
我是标题
</h2>'
).
html
(obj.
title
);//内容是obj.
title
this
.
$dialogX
=$(
'<span class="dialog-close">X</span>'
).
on
(
'click'
,
function
(){
remove
(
_this
);
});
生成其他元素并插入body，点击关闭按钮调用remove函数
function
remove
(x) {
x.
$dialogMask
.
remove
();
x.
$dialogBox
.
remove
();
}
remove函数，调用移除遮罩层和弹出层
二、index.js
$
(
'#btn'
).
on
(
'click'
,
function
() {//点击#btn按钮生成第一个弹出层
var
dialog1
=
new
Dialog({
width
:
200
,
height
:
200
,
background
:
'red'
,
title
:
'
登录
'
,
content
:
"login.html"
});
dialog1
.
open
();
});
$
(
'body'
).
on
(
'click'
,
'.confirm-btn'
,
function
() {
//点击确定按钮生成二级弹出层 事件委托（后生成元素）
var
dialog2
=
new
Dialog({
width
:
100
,
height
:
100
,
background
:
'yellow'
,
title
:
'
登录
'
,
content
:
"input.html"
//html片段
});
dialog2
.
open
();
});
dialog.js
define(['jquery'],function ($) {
function Dialog(obj) {
var _this=this;
this.$dialogMask=$('<div class="dialog-mask"></div>').on('click',function () {
remove(_this);
});
this.$dialogBox=$('<div class="dialog-box">').css({
width:obj.width,
height:obj.height,
background:obj.background
});
this.$dialogTitle=$('<div class="dialog-title">');
this.$dialogContent=$('<div class="dialog-content"></div>').load(obj.content);
this.$dialogH2=$('<h2>我是标题</h2>').html(obj.title);
this.$dialogX=$('<span class="dialog-close">X</span>').on('click',function(){
remove(_this);
});
}
function remove(x) {
x.$dialogMask.remove();
x.$dialogBox.remove();
}
Dialog.prototype.open=function () {
$('body').append(this.$dialogMask).append(this.$dialogBox);
this.$dialogBox.append(this.$dialogTitle).append(this.$dialogContent);
this.$dialogTitle.append(this.$dialogH2).append(this.$dialogX);
};
return Dialog;//暴露
});
index.js
require(['dialog2'], function (Dialog) {//$将JQuery暴露出来的
$('#btn').on('click', function () {
var dialog1 = new Dialog({
width: 200,
height: 200,
background: 'red',
title: '登录',
content: "login.html"
});
dialog1.open();
});
$('body').on('click', '.confirm-btn', function () {
var dialog2 = new Dialog({
width: 100,
height: 100,
background: 'yellow',
title: '登录',
content: "input.html"
});
dialog2.open();
});
});
.dialog-mask{
position: absolute;
left:0;
top:0;
bottom:0;
right: 0;
background: rgba(0,0,0,0.4);
/*z-index: 1;*/
}
.dialog-box{
width: 400px;
height: 300px;
background: #ffffff;
position: absolute;
left:50%;
top:50%;
/*z-index: 10;*/
/*margin-top:-150px;
margin-left:-200px;*/
-webkit-transform:translate(-50%,-50%);/*定位*/
}
.dialog-close{
position: absolute;
right:5px;
top:5px;
width: 20px;
height: 20px;
background: #cccccc;
color: #fff;
border-radius: 10px;
text-align: center;
line-height: 20px;
cursor: pointer;
}
login.html 片段
<div>
<div>
用户名：<input type="text"/>
</div>
<div>
密码：<input type="text"/>
</div>
<button class="confirm-btn">确定</button>
</div>
input.html 片段
<div>
请输入用户名
</div>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
<link rel="stylesheet" href="css.css"/>
<script src="../require.js" data-main="index"></script>
</head>
<body>
<button id="btn">click</button>
</body>
</html>