1.遮罩层
1. 要求：点击按钮，弹出一个碳层
2.涉及知识点：
1.设置遮罩层：
width:100%
hight:100%
是根据父元素设置，body本身是内容撑开的高度，所以可以直接把body,html{width:100%}
或者{
position: absolute;
left: 0;
right: 0;
top: 0;
margin:0;
}
2.给元素设置背景：
background-image: url('NARUTO.jpg');//设置背景
background-repeat:no-repeat; //不重复
background-position: top;//背景位置
3.
1.元素居中：
position: absolute;
top:50%
margin-top:-(高度的一半)PX，
margin-left:-(宽度的一半)PX,
其中absolute相对上一个已定位的父元素，这玩意也可以是绝对定位
2.文本居中：
1.上下：
height：50px;
2.line-hitht:50px;
左右：text-aline :center
4.var settings = $.extend({
width:300,
height:400,
},option);//设置默认值
用前一个把后一个覆盖
5.load(url)加载 谷歌浏览器不支持本地跨域就是file开头的这种
3.代码实现：
1.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
</style>
<link rel="stylesheet" type="text/css" href="dialog.css">
<script src="jquery-1.12.4.min.js"></script>
<script type="" src="zhezhaocen.js"></script>
</head>
<body>
<button id="btn">click</button>
<script type="text/javascript">
$("#btn").on("click",function(){
dialog({
width:400,
height:400,
url:'login.html',
title:"遮罩层呵呵哒",
footer:"this is a footer",
})
})
</script>
</body>
</html>
url:<form action="">
<p>
用户名：<input type="text">
</p>
<p>
密码 ： <input type="password" name="">
</p>
<p>
<input type="submit" name="" value="确定">
</p>
</form>
2.css
*{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
body,html{
height: 100%;
width:100%;
}
#zhezhaoceng{
width: 100%;
height: 100%;
background: #000;
opacity:0.3;
background-image: url(NARUTO.jpg);
/*content:url(NARUTO.jpg);*/
background-repeat:no-repeat;
background-position: top;
position: relative;
display: none;
/* background-size: 50%;*/
}
#containt{
width: 300px;
height: 400px;
background: #fff;
position: absolute;
left:50%;
margin-left: -150px;
margin-top: -200px;
top:50%;
padding: 10px;
display: none;
}
#title{
height: 50px;
line-height: 50px;
border-bottom: 1px solid grey;
}
.wapper{
width: 100%;
height: 100%;
position: relative;
}
#footer{
height: 50px;
line-height: 50px;
border-top: 1px solid grey;
position: absolute;
bottom: 0;
width: 95%;
}
.dialog-close{
float: right;
}
#body{
margin:10px 0;
}
3.js:
(function($){
var a;
var b;
window.dialog= function(options){
var settings = $.extend({
width:300,
height:400,
},options);
// alert("hahahhhhh");
var $html=$('<div id="zhezhaoceng">'+
'</div>'+
'<div id="containt">'+
'<div class="wapper">'+
'<div id="title">'+
settings.title+
'<span class="dialog-close">'+
'[X]'+
'</span>'+
'</div>'+
'<div id="body">'+
'</div>'+
'<div id="footer">'+
settings.footer+
'</div>');
console.log($html);
$('body').append($html)
$("#zhezhaoceng").show();
$('#containt').css({
width:settings.width,
height:settings.height,
marginLeft:-settings.left/2,
marginTop:-settings.top/2,
}
).show();
// alert("hahahhhhh")
$('#body').load(settings.url);
$(".dialog-close").on('click',function(){
$("#zhezhaoceng").hide();
$("#containt").hide();
})
}
})(jQuery)