Js popover plug in function instance code sharing
- 2020-03-30 00:48:42
- OfStack
Let's first look at the basic configuration items for this component:
this.config = {
targetCls : '.clickElem', //Click on the element
title: ' I am a Long En ', //The window title
content : 'text:<p style="width:100px;height:100px"> I am a dragon </p>',
//content : 'img:http://www.baidu.com/a.jpg',
//Window contents {text: specific contents | id:id name | img: image link |
//Iframe: SRC link} {string}& NBSP;
width: 400, //Content width
height : 300, //Height of content
theight : 30,//The height of the title defaults to 30
drag : true, //Can I drag the default to true
time : 3000, //Automatically closing the window for an empty time or 'undefined' is not closed
showBg : true, //Sets whether to display the mask layer by default to true mask
closable : '#window-close', //Close button
bgColor : '#000', //The default color
opacity : 0.5,//Default transparency
position : {
x: 0,
y: 0 //Default is 0 centered
},
zIndex : 10000,
isScroll : true, //By default the window scrolls as it scrolls
isResize : true, //By default, the window scales as it scales
callback : null//Popover displays the post - callback function
};
JS simple popover plug-in (including demo and source code)
Read, 1 comment, collect, edit
Recent project done things is not much, and just paid leave today, so during this time just simple JS popup window function is studied, and the Internet, of course, this plugin is very much, I also did not carefully read online plug-in source's a popup window with daily use only plug-ins have so multi-function to implement their own pop-up train of thought, of course this may achieve the basic functions, so if you want to do better and more perfect need continue to optimize the future! If there are shortcomings! Please understand!
Let's first look at the basic configuration items for this component:
Press Ctrl+C to copy the code
2. The img (picture) can configure the following img:http://www.baidu.com/a.jpg
3. Id (id node) You can configure 'id:XX' as follows
4. Iframe You can configure the 'iframe:http://www.baidu.com (iframe address)'
3. Provide popover callback function: after popover, you can do what you want.
So there's nothing to say about the popover component and of course if you're going to use your own CSS styles in your own projects you can rewrite them yourself, and I'm not writing JS dead just doing the basic business function of JS popover.
The HTML code is as follows:
<div class="clickElem" style="margin-top:10px;"> I am a Long En Please click on the I </div>
<div class="clickElem" style="margin-top:10px;"> I am a Long En Please click on the I </div>
The CSS code is as follows
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
label{cursor:pointer;}
#window-box{border:5px solid #E9F3FD;background:#FFF;}
.windown-title{position:relative;height:30px;border:1px solid #A6C9E1;overflow:hidden;background:url(images/tipbg.png) 0 0 repeat-x;}
.window-title h2{padding-left:5px;font-size:14px;color:#666;}
#window-close{position:absolute;right:10px;top:8px;width:10px;height:16px;text-indent:-10em;overflow:hidden;background:url(images/tipbg.png) 100% -49px no-repeat;cursor:pointer;}
#window-content-border{padding:5px 0 5px 5px;}
</style>
The JS code is as follows
function Overlay(options){
this.config = {
targetCls : '.clickElem', //Click on the element
title: ' I am a Long En ', //The window title
content : 'text:<p style="width:100px;height:100px"> I am a Long En </p>',
//content : 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
//Window contents {text: specific contents | id:id name | img: image link |
//Iframe: SRC link} {string}& NBSP;
width: 400, //Content width
height : 300, //Height of content
theight : 30,//The height of the title defaults to 30
drag : true, //Can I drag the default to true
time : 3000, //Automatically closing the window for an empty time or 'undefined' is not closed
showBg : true, //Sets whether to display the mask layer by default to true mask
closable : '#window-close', //Close button
bgColor : '#000', //The default color
opacity : 0.5,//Default transparency
position : {
x: 0,
y: 0 //Default is 0 centered
},
zIndex : 10000,
isScroll : true, //By default the window scrolls as it scrolls
isResize : true, //By default, the window scales as it scales
callback : null//Popover displays the post - callback function
};
this.cache = {
isrender : true, //The popover HTML structure is rendered only once
isshow: false, //Whether the window is already displayed
moveable : false
};
this.init(options);
}
Overlay.prototype = {
constructor: Overlay,
init: function(options){
this.config = $.extend(this.config,options || {});
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).each(function(index,item){
$(item).unbind('click');
$(item).bind('click',function(){
//Renders the HTML structure of the popover
self._renderHTML();
//Windows mobile
self._windowMove();
});
});
//The zoom window
self._windowResize('#window-box');
//The window scrolls along with the scroll bar
self._windowIsScroll('#window-box');
},
_renderHTML: function(){
var self = this,
_config = self.config,
_cache = self.cache;
var html ='';
if(_cache.isrender) {
html+= '<div id="windowbg" style="display:none;position:absolute;top:0;left:0;"></div>' +
'<div id="window-box" style="display:none;overflow:hidden;">' +
'<div class="window-title"><h2></h2><span id="window-close"> Shut down </span></div>'+
'<div id="window-content-border"><div id="window-content"></div></div>' +
'</div>';
$('body').append(html);
$("#windowbg").css('z-index',_config.zIndex);
$('#window-content-border').css({'width':_config.width + 'px','height':_config.height + 'px','overflow':'auto'});
$('.window-title h2').html(_config.title);
$('.window-title').css({'height':_config.theight + 'px','width':_config.width,'overflow':'hidden'});
_cache.isrender = false;
//Determines the format of the content passed in
self._contentType();
if(_config.showBg) {
//Render the background width and height
self._renderDocHeight();
$("#windowbg").show();
self.show();
}else {
$("#windowbg").hide();
self.show();
}
self._showDialogPosition("#window-box");
}else {
//If the popover is already created, it's just hidden, so we show it
self.show();
$("#windowbg").animate({"opacity":_config.opacity},'normal');
if(_config.showBg) {
$("#windowbg").show();
}
self._showDialogPosition("#window-box");
}
$(_config.closable).unbind('click');
$(_config.closable).bind('click',function(){
//Click the close button
self._closed();
});
//Render callback function
_config.callback && $.isFunction(_config.callback) && _config.callback();
},
show: function(){
var self = this,
_config = self.config,
_cache = self.cache;
$("#window-box") && $("#window-box").show();
_cache.isshow = true;
if(_config.time == '' || typeof _config.time == 'undefined') {
return;
}else {
t && clearTimeout(t);
var t = setTimeout(function(){
self._closed();
},_config.time);
}
},
hide: function(){
var self = this,
_cache = self.cache;
$("#window-box") && $("#window-box").hide();
_cache.isshow = false;
},
_contentType: function(){
var self = this,
_config = self.config,
_cache = self.cache;
var contentType = _config.content.substring(0,_config.content.indexOf(":")),
content = _config.content.substring(_config.content.indexOf(":")+1,_config.content.length);
switch(contentType) {
case 'text':
$('#window-content').html(content);
break;
case 'id':
$('#window-content').html($('#'+content).html());
break;
case 'img':
$('#window-content').html("<img src='"+content+"' class='window-img'/>");
break;
case 'iframe':
$('#window-content').html('<iframe src="'+content+'" width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>');
$("#window-content-border").css({'overflow':'visible'});
break;
}
},
_closed: function(){
var self = this,
_config = self.config,
_cache = self.cache;
if(_cache.isshow) {
self.hide();
}
if(_config.showBg) {
$("#windowbg").hide();
}
$("#windowbg").animate({"opacity":0},'normal');
},
_showDialogPosition: function(container) {
var self = this,
_config = self.config,
_cache = self.cache;
$(container).css({'position':'absolute','z-index':_config.zIndex + 1});
var offsetTop = Math.floor(($(window).height() - $(container).height())/2) + $(document).scrollTop(),
offsetLeft = Math.floor(($(window).width() - $(container).width())/2) + $(document).scrollLeft();
//Determine if the x,y position is equal to 0 by default if it is centered otherwise it will be repositioned based on the position passed in
if(0 === _config.position.x && 0 === _config.position.y){
$(container).offset({'top':offsetTop, 'left':offsetLeft});
}else{
$(container).offset({'top':_config.position.y,'left':_config.position.x});
}
},
_renderDocHeight: function(){
var self = this,
_config = self.config;
$("#windowbg").animate({"opacity":_config.opacity},'normal');
if(self._isIE6()){
$("#windowbg").css({'background':'#fff','height':$(document).height()+'px','width':$(document).width()+"px"});
}else {
$("#windowbg").css({'background':_config.bgColor,'height':$(document).height()+'px','width':$(document).width()+"px"});
}
},
_windowResize: function(elem){
var self = this,
_config = self.config;
$(window).unbind('resize');
$(window).bind('resize',function(){
t && clearTimeout(t);
var t = setTimeout(function(){
if(_config.isResize){
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
_windowIsScroll: function(elem){
var self = this,
_config = self.config;
$(window).unbind('scroll');
$(window).bind('scroll',function(){
t && clearTimeout(t);
var t = setTimeout(function(){
if(_config.isScroll){
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
_windowMove: function(){
var self = this,
_config = self.config,
_cache = self.cache;
var mouseX = 0,
mouseY = 0;
$('.window-title').mouseenter(function(){
$(this).css({'cursor':'move'});
});
$('.window-title').mouseleave(function(){
$(this).css({'cursor':'default'});
});
$('.window-title').mousedown(function(e){
_cache.moveable = true;
mouseX = e.clientX - $(this).offset().left;
mouseY = e.clientY - $(this).offset().top;
$('.window-title').css({'cursor':'move'});
});
$(document).mouseup(function(){
if(!_cache.moveable) {
return;
}
$('.window-title').css({'cursor':'default'});
_cache.moveable = false;
});
$('#window-box').mousemove(function(e){
if(_cache.moveable) {
$(this).css({'left':e.clientX - mouseX + 'px','top':e.clientY - mouseY + 'px'});
}
});
},
_isIE6: function(){
return navigator.userAgent.match(/MSIE 6.0/)!= null;
}
};