自定義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>
三、顯示效果圖
