自定义iframe弹框
一、参数说明:
- id:iframe弹出id
- mId:弹出拖动头部移动位置的区域的id
- title:弹出头部标题
- content:内容(内容可为文字或者是html页面)
- area:弹出区域的高宽(为数组类型,如:[‘420px’,‘300px’])
- btn:底部按钮设置,可设置多个(如:[‘取消’,‘确定’])
- shade:是否显示遮罩(默认为true)
- success:渲染成功后的回调函数
- faile:取消按钮的回调函数
- yes:确定按钮的回调函数
注:以下代码有不完善的地方欢迎指正
二、案例
1、首先是需要定义iframe弹框的页面index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义弹出层</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/alert.css"/>
</head>
<body>
<div class="un-parent un-inline-block">
<div class="un-btn" id="btn1">
按钮
</div>
</div>
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/un.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/alert.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
2、定义第二个页面iframe页面iframe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
<link rel="stylesheet" type="text/css" href="../../css/common.css"/>
</head>
<body>
<div class="un-warpper">
这是也该iframe页面
</div>
</body>
</html>
3、js代码 可将一下的js代码另存为一个js,然后在index.html页面引用
/*面向对象封装弹窗*/
var Un = function(pop,options){
this.$ele = $(pop);
this.defaults = {
'id':'',
'mId':'',
'title':'信息',
'content':'内容',
'area':['420px','300px'],
'btn':['取消','确定'],
'shade':true,
'other':'',
'success':function(){
},
'faile':function(){
},
'yes':function(){
}
}
this.index = 0;
this.setting = $.extend({},this.defaults,options);
}
Un.prototype = {
Initialize:function(){
var that = this;
this.$ele.click(function(){
that.append();
that.hide();
that.btns();
});
},
btns:function(){
var that = this;
var btns = that.setting.btn;
btns.forEach(function(e,i){
var o = $('#'+that.setting.id).find('.un-btn')[i];
$(o).click(function(){
if(i === 0){
that.setting.faile();
}else if(i === 1 ){
that.setting.yes();
}else{
that.setting['btn'+i];
}
})
})
},
show:function(){
var that = this;
$('.un-mask').show();
/*添加样式*/
var css = {
'width':that.setting.area[0],
'height':that.setting.area[1],
'margin-top':'-'+parseInt(that.setting.area[1])/2+'px',
'margin-left':'-'+parseInt(that.setting.area[0])/2+'px',
'display':'block'
};
$('#'+that.setting.id).css(css);
},
hide:function(){
var that = this;
$('#'+that.setting.id).on('click','.un-close',function(){
$('.un-mask').remove();
$('#'+that.setting.id).remove();
});
},
append:function(){
var that = this;
var html = '';
that.setting.id = 'un-pop'+that.index,
that.setting.mId = 'un-pop-title'+that.index;
that.index = that.index+1;
if(that.setting.shade){
html += '<div class="un-mask"></div>';
}
html += '<div class="un-pop" id="'+that.setting.id+'">'
+'<div class="un-pop-title" id="'+that.setting.mId+'">'
+that.setting.title
+'</div>'
+'<div class="un-pop-iframe">';
if(that.setting.content.indexOf('.html') != -1){
html += '<iframe src="'+that.setting.content+'" width="100%" height="100%"></iframe>';
}else{
html += that.setting.content;
}
html += '</div>'
+'<div class="un-close">'
+'<i></i>'
+'</div>'
+'<div class="un-btn-box">';
for(var i = 0 ;i < that.setting.btn.length;i++){
if(i == 0){
html += '<a class="un-btn" href="javascript:;">'+that.setting.btn[0]+'</a>';
}else{
html += '<a class="un-btn un-btn-blue" href="javascript:;">'+that.setting.btn[i]+'</a>';
}
}
html += '</div></div>';
$('body').append(html);
that.show();
that.move();
},
move:function(){
var that = this;
var box = $('#'+that.setting.id)[0];
var title = $('#'+that.setting.mId)[0];
//标志法
var flag = true, x,y;
title.onmousedown = function(e){
x = e.pageX - box.offsetLeft;
y = e.pageY - box.offsetTop;
flag = true;
document.onmousemove = function(e){
if(flag){
var boxLeft = e.pageX-x;
var boxTop = e.pageY-y;
boxLeft = Math.min(Math.max(boxLeft,0),(window.innerWidth-box.offsetWidth));//左边取小,右取大
boxTop = Math.min(Math.max(boxTop,0),(window.innerHeight-box.offsetHeight));
box.style.left=boxLeft+"px";
box.style.top=boxTop+"px";
box.style.marginTop = 0;
box.style.marginLeft = 0;
}
};
document.onmouseup = function(){
flag = false;
};
document.onmouseleave = function(){
flag = false;
}
};
}
}
$.fn.playesee = function(option){
var un = new Un(this,option);
return un.Initialize();
}
function close(id){
$('.un-mask').remove();
$('#'+id).remove();
}
4、在index.html调用方法
<script type="text/javascript">
var option = {
'title':'iframe编辑框',
'content':'iframe.html',
'area':['620px','500px'],
'btn':['取消','确定'],
'yes':function(){
var that = this;
},
'faile':function(){
var that = this;
close(that.id)
}
}
$('#btn1').playesee(option);
</script>