9、jQuery外掛之easydialog-v2.0彈窗外掛
阿新 • • 發佈：2019-01-16
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="easydialog.css" />
<script src="easydialog.min.js"></script>
<style>
* { margin:0;padding:0; }
body { background:#fff; font:12px/150% "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
a{ color:#09c; }
a:hover{ color:#000; text-decoration:none; }
.f_l{ float:left; }
.f_r{ float:right; }
.header{ background:#f5f5f5; height:60px; border-bottom:1px solid #e5e5e5; width:100%; }
.header_box{ width:960px; margin:0 auto; overflow:hidden; line-height:60px; }
.header_box .logo{ font-size:24px; font-weight:400; color:#333; height:30px; line-height:30px; float:left; border-right:2px solid #c9c9c9; margin-top:15px; padding-right:20px; }
.header_box .sub_tit{ font-size:22px; font-weight:400; font-family:'宋體'; color:#666; height:30px; line-height:30px; overflow:hidden; margin-top:15px; float:left; padding-left:20px; }
.header_box .f_r{ font-size:12px; margin:5px -10px 0 0; }
.header_box .f_r a{ margin-right:10px; }
.wrapper{ width:960px; margin:2% auto 0; padding-bottom:100px; }
.wrapper h3{ font-size:14px; font-weight:700; color:#333; height:30px; line-height:30px; font-family:"Microsoft yahei", Arial; margin-bottom:5px; }
.code_box{ width:960px; overflow:hidden; border-bottom:1px solid #e1e1e1; padding-bottom:20px; margin-bottom:40px; }
.code_box pre{ width:340px; background:#f5f5f5; padding:10px 20px; font-family:"Consolas","Courier New",Courier,mono; font-size:13px; line-height:18px; border:1px solid #eee; float:left; color:#333; }
.code_box,.run{ border:1px solid; border-radius:2px; cursor:pointer; font-family:"Microsoft yahei", Arial; font-size:12px; width:250px; height:22px; line-height:22px; display:block; text-align:center; border-color:#c3c3c3; background:#ececec; color:#333; background:-webkit-gradient(linear,center bottom,center top,from(#ececec),to(#f4f4f4)); background:-moz-linear-gradient(90deg,#ececec,#f4f4f4); text-decoration:none; }
.con_right{ width:558px; float:left; padding-left:20px; }
.con_right p{ font-size:13px; color:#515151; margin-bottom:10px; line-height:24px; }
.param_tb{ width:960px; border-collapse:collapse; border-bottom:1px solid #e1e1e1; border-left:1px solid #e1e1e1; font-size:13px; color:#333; }
.param_tb tr td{ line-height:20px; padding:5px 0; text-align:center; border-right:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; }
.param_tb tr .t_l{ text-align:left; padding:5px 10px; }
.param_tb .even td{ background:#f5f5f5; }
.param_tb th{ background:#f5f5f5; line-height:40px; border-right:1px solid #e1e1e1; font-family:"Microsoft yahei", Arial; font-size:14px; font-weight:700; border-top:2px solid #4D90F0; }
.param_tb p{ line-height:20px; padding:5px 0; }
.html_code{ margin-top:50px; }
.html_code p{ font-size:13px; margin-bottom:10px; }
.html_code pre{ width:918px; background:#f5f5f5; padding:10px 20px; font-family:"Consolas","Courier New",Courier,mono; font-size:13px; line-height:18px; border:1px solid #eee; color:#333; margin-bottom:20px; }
#imgBox{ border:1px solid #d3d3d3; padding:5px; background:#fff; width:600px; height:375px; }
</style>
</head>
<body>
<a href="javascript:void(0)" class="run" id="demoBtn1">使用預設的HTML模板</a>
<a href="javascript:void(0)" class="run" id="demoBtn2">預設模板只有content</a>
<a href="javascript:void(0)" class="run" id="demoBtn3">自定義彈出層</a>
<a href="javascript:void(0)" class="run" id="demoBtn4">遮罩層</a>
<a href="javascript:void(0)" class="run" id="demoBtn5">跟隨定位</a>
<a href="javascript:void(0)" class="run" id="demoBtn6">關閉拖拽</a>
<a href="javascript:void(0)" class="run" id="demoBtn7">回撥函式</a>
</body>
<div id="imgBox" style="display:none;"><img src="112108729.jpg" height="377" width="498" alt="" /></div>
<script>
var ee;
var $ = function(ee){
return document.getElementById(ee);
};
var btnFn = function( e ){
alert( e.target );
return false;
};
$('demoBtn1').onclick = function(){
easyDialog.open({
container : {
header : '彈出層標題',
content : '歡迎使用easyDialog : )',
yesFn : btnFn,
noFn : true
},
fixed : false
});
};
$('demoBtn2').onclick = function(){
easyDialog.open({
container : {
content : '彈出層將在2秒後關閉...'
},
autoClose : 2000
});
};
$('demoBtn3').onclick = function(){
easyDialog.open({
container : 'imgBox',
autoClose : 2000,
fixed : false
});
};
$('demoBtn4').onclick = function(){
easyDialog.open({
container : {
header : '沒有遮罩層',
content : '歡迎使用easyDialog : )'
},
overlay : false
});
};
easyDialog.close();//關閉彈出窗，demoBtn1~-demoBtn4 這四個有效果，後面的就沒有效果
$('demoBtn5').onclick = function(){
easyDialog.open({
container : {
header : '跟隨定位',
content : '彈出層可以跟隨某元素絕對定位'
},
follow : 'demoBtn5',
followX : -137,
followY : 24
});
};
$('demoBtn6').onclick = function(){
easyDialog.open({
container : {
header : '關閉拖拽',
content : '歡迎使用easyDialog : )'
},
drag : false
});
};
var callFn = function(){
alert( 'hello' );
};
$('demoBtn7').onclick = function(){
easyDialog.open({
container : {
header : '回撥函式',
content : '歡迎使用easyDialog : )'
},
callback : callFn
});
};
</script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="easydialog.css" />
<script src="easydialog.min.js"></script>
<style>
* { margin:0;padding:0; }
body { background:#fff; font:12px/150% "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
a{ color:#09c; }
a:hover{ color:#000; text-decoration:none; }
.f_l{ float:left; }
.f_r{ float:right; }
.header{ background:#f5f5f5; height:60px; border-bottom:1px solid #e5e5e5; width:100%; }
.header_box{ width:960px; margin:0 auto; overflow:hidden; line-height:60px; }
.header_box .logo{ font-size:24px; font-weight:400; color:#333; height:30px; line-height:30px; float:left; border-right:2px solid #c9c9c9; margin-top:15px; padding-right:20px; }
.header_box .sub_tit{ font-size:22px; font-weight:400; font-family:'宋體'; color:#666; height:30px; line-height:30px; overflow:hidden; margin-top:15px; float:left; padding-left:20px; }
.header_box .f_r{ font-size:12px; margin:5px -10px 0 0; }
.header_box .f_r a{ margin-right:10px; }
.wrapper{ width:960px; margin:2% auto 0; padding-bottom:100px; }
.wrapper h3{ font-size:14px; font-weight:700; color:#333; height:30px; line-height:30px; font-family:"Microsoft yahei", Arial; margin-bottom:5px; }
.code_box{ width:960px; overflow:hidden; border-bottom:1px solid #e1e1e1; padding-bottom:20px; margin-bottom:40px; }
.code_box pre{ width:340px; background:#f5f5f5; padding:10px 20px; font-family:"Consolas","Courier New",Courier,mono; font-size:13px; line-height:18px; border:1px solid #eee; float:left; color:#333; }
.code_box,.run{ border:1px solid; border-radius:2px; cursor:pointer; font-family:"Microsoft yahei", Arial; font-size:12px; width:250px; height:22px; line-height:22px; display:block; text-align:center; border-color:#c3c3c3; background:#ececec; color:#333; background:-webkit-gradient(linear,center bottom,center top,from(#ececec),to(#f4f4f4)); background:-moz-linear-gradient(90deg,#ececec,#f4f4f4); text-decoration:none; }
.con_right{ width:558px; float:left; padding-left:20px; }
.con_right p{ font-size:13px; color:#515151; margin-bottom:10px; line-height:24px; }
.param_tb{ width:960px; border-collapse:collapse; border-bottom:1px solid #e1e1e1; border-left:1px solid #e1e1e1; font-size:13px; color:#333; }
.param_tb tr td{ line-height:20px; padding:5px 0; text-align:center; border-right:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; }
.param_tb tr .t_l{ text-align:left; padding:5px 10px; }
.param_tb .even td{ background:#f5f5f5; }
.param_tb th{ background:#f5f5f5; line-height:40px; border-right:1px solid #e1e1e1; font-family:"Microsoft yahei", Arial; font-size:14px; font-weight:700; border-top:2px solid #4D90F0; }
.param_tb p{ line-height:20px; padding:5px 0; }
.html_code{ margin-top:50px; }
.html_code p{ font-size:13px; margin-bottom:10px; }
.html_code pre{ width:918px; background:#f5f5f5; padding:10px 20px; font-family:"Consolas","Courier New",Courier,mono; font-size:13px; line-height:18px; border:1px solid #eee; color:#333; margin-bottom:20px; }
#imgBox{ border:1px solid #d3d3d3; padding:5px; background:#fff; width:600px; height:375px; }
</style>
</head>
<body>
<a href="javascript:void(0)" class="run" id="demoBtn1">使用預設的HTML模板</a>
<a href="javascript:void(0)" class="run" id="demoBtn2">預設模板只有content</a>
<a href="javascript:void(0)" class="run" id="demoBtn3">自定義彈出層</a>
<a href="javascript:void(0)" class="run" id="demoBtn4">遮罩層</a>
<a href="javascript:void(0)" class="run" id="demoBtn5">跟隨定位</a>
<a href="javascript:void(0)" class="run" id="demoBtn6">關閉拖拽</a>
<a href="javascript:void(0)" class="run" id="demoBtn7">回撥函式</a>
</body>
<div id="imgBox" style="display:none;"><img src="112108729.jpg" height="377" width="498" alt="" /></div>
<script>
var ee;
var $ = function(ee){
return document.getElementById(ee);
};
var btnFn = function( e ){
alert( e.target );
return false;
};
$('demoBtn1').onclick = function(){
easyDialog.open({
container : {
header : '彈出層標題',
content : '歡迎使用easyDialog : )',
yesFn : btnFn,
noFn : true
},
fixed : false
});
};
$('demoBtn2').onclick = function(){
easyDialog.open({
container : {
content : '彈出層將在2秒後關閉...'
},
autoClose : 2000
});
};
$('demoBtn3').onclick = function(){
easyDialog.open({
container : 'imgBox',
autoClose : 2000,
fixed : false
});
};
$('demoBtn4').onclick = function(){
easyDialog.open({
container : {
header : '沒有遮罩層',
content : '歡迎使用easyDialog : )'
},
overlay : false
});
};
easyDialog.close();//關閉彈出窗，demoBtn1~-demoBtn4 這四個有效果，後面的就沒有效果
$('demoBtn5').onclick = function(){
easyDialog.open({
container : {
header : '跟隨定位',
content : '彈出層可以跟隨某元素絕對定位'
},
follow : 'demoBtn5',
followX : -137,
followY : 24
});
};
$('demoBtn6').onclick = function(){
easyDialog.open({
container : {
header : '關閉拖拽',
content : '歡迎使用easyDialog : )'
},
drag : false
});
};
var callFn = function(){
alert( 'hello' );
};
$('demoBtn7').onclick = function(){
easyDialog.open({
container : {
header : '回撥函式',
content : '歡迎使用easyDialog : )'
},
callback : callFn
});
};
</script>