一、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>