Currently tested: supports IE6+ Firefox, Google browser, etc.
Let’s first take a look at the basic configuration items of this component: as follows:
Copy the code code as follows:
this.config = {
targetCls : '.clickElem', // Click element
title: 'I am Long En', // window title
content : 'text:<p>I am a dragon</p>',
//content: 'img:http://www.baidu.com/a.jpg',
// Window content {text: specific content | id: id name | img: image link |
// iframe:src link} {string}
width: 400, // width of content
height : 300, //Height of content
height : 30, // The default height of the title is 30
drag : true, // Whether it can be dragged by default is true
time: 3000, // If the time to automatically close the window is empty or 'undefined', it will not be closed.
showBg: true, // Set whether to display the mask layer. The default value is true mask.
closable : '#window-close', // close button
bgColor : '#000', //Default color
opacity: 0.5,//Default transparency
position : {
x: 0,
y: 0 //The default is equal to 0, centered
},
zIndex: 10000,
isScroll: true, //By default, the window scrolls as it scrolls
isResize : true, // Scale with window scaling by default
callback: null//Callback function after the pop-up window is displayed
};
Write a simple pop-up plug-in in JS (including demo and source code)
2013-12-11 22:30 by Long En0707, 409 reads, 1 comment, collection, edit
I haven't finished a lot of projects recently, and I happened to be taking a break today, so I took this time to study the simple JS pop-up function. Of course, there are many plug-ins online, and I didn't look carefully at the source code of the plug-ins online. I just relied on them. The pop-up plug-ins that I use every day have so many functions to realize my own pop-up ideas. Of course, I may have achieved the basic functions, so if I want to make it better and more complete, I need to continue to optimize it in the future! If there are any shortcomings! Please forgive me!
Since everyone knows what the pop-up window looks like, I didn’t do a demonstration rendering this time! Currently tested: supports IE6+ Firefox, Google browser, etc.
Let’s first take a look at the basic configuration items of this component: as follows:
Press Ctrl+C to copy the code
Press Ctrl+C to copy the code
1. Support configuring the title content, the height of the title, the width and height of the content, whether the window can be automatically closed after dragging the pop-up window, whether to display the configuration of the mask background color and transparency, and the display position of the window. The default x-axis 0 and y-axis 0 are For center alignment, you can also configure the position of the x-axis and y-axis yourself, but please note that the X-axis and y-axis are relative to the parent element. If the relative positioning of the parent element is not specified, it will be relative to the document by default. Of course, it is not recommended that the width and height of the window content exceed the width and height of one screen of the browser. Try to be smaller than the width and height of the first screen. Because I used other people’s pop-up plug-ins in the past, it would exist after clicking the close button because the browser has a scroll bar. After triggering the scroll bar event, the window cannot be closed. If the content width and height are large, it doesn't matter. The window will automatically have scroll bars.
2. The content configuration items of the window support four types of 1. text (text). Text can be configured as follows: <p>I am Long En</p>
2. img (picture) You can configure img as follows: http://www.baidu.com/a.jpg
3. id (id node) can be configured as follows 'id:XX'
4. iframe can be configured as follows 'iframe:http://www.baidu.com (iframe address)'
3. Provide a callback function after the pop-up window: For example, you can do what you want to do after the pop-up window.
So there is nothing to say about the pop-up window component. Of course, if you want to use the css style in your own project, you can rewrite it yourself. I have not written the JS to death, but only complete the basic pop-up window business functions of JS.
The HTML code is as follows:
Copy the code code as follows:
<div style="margin-top:10px;">I am Long En, please click me</div>
<div style="margin-top:10px;">I am Long En, please click me</div>
CSS code is as follows
Copy the code code 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;}
.window-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
Copy the code code as follows:
/**
*Write JS pop-up window component
* @date 2013-12-10
* @author tugenhua
* @email [email protected]
*/
function Overlay(options){
this.config = {
targetCls : '.clickElem', // Click on the element
title: 'I am Long En', // window title
content : 'text:<p>I am Long En</p>',
//content: 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
// Window content {text: specific content | id: id name | img: image link |
// iframe:src link} {string}
width: 400, // width of content
height : 300, //Height of content
height : 30, // The default height of the title is 30
drag : true, // Whether it can be dragged by default is true
time: 3000, // If the time to automatically close the window is empty or 'undefined', it will not be closed.
showBg: true, // Set whether to display the mask layer. The default value is true mask.
closable : '#window-close', // close button
bgColor : '#000', //Default color
opacity: 0.5,//Default transparency
position : {
x: 0,
y: 0 //The default is equal to 0, centered
},
zIndex: 10000,
isScroll: true, //By default, the window scrolls as it scrolls
isResize : true, // Scale with window scaling by default
callback: null//Callback function after the pop-up window is displayed
};
this.cache = {
isrender: true, // The pop-up HTML structure is only rendered once
isshow: false, // Whether the window has been 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(){
// Render the pop-up HTML structure
self._renderHTML();
// window movement
self._windowMove();
});
});
// Window zoom
self._windowResize('#window-box');
// The window scrolls with the scroll bar
self._windowIsScroll('#window-box');
},
/*
* Render pop-up HTML structure
*/
_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><h2></h2><span id="window-close">Close</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;
// Determine the format of the passed in content
self._contentType();
if(_config.showBg) {
// Render background width and height
self._renderDocHeight();
$("#windowbg").show();
self.show();
}else {
$("#windowbg").hide();
self.show();
}
self._showDialogPosition("#window-box");
}else {
// If the pop-up window has been created and is just hidden, then we display 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();
});
// Callback function after rendering
_config.callback && $.isFunction(_config.callback) && _config.callback();
},
/**
* Show pop-up window
*/
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 pop-up window
*/
hide: function(){
var self = this,
_cache = self.cache;
$("#window-box") && $("#window-box").hide();
_cache.isshow = false;
},
/**
* Determine the type of content passed in
*/
_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+'" scrolling="yes" frameborder="0"></iframe>');
$("#window-content-border").css({'overflow':'visible'});
break;
}
},
/**
* Click the close button
*/
_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');
},
/**
* The position where the pop-up window is displayed is centered by default
*/
_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 whether the x, y position is equal to 0 by default. If so, center it, otherwise reposition according to the passed in position.
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});
}
},
/**
* Render the height of the bottom background
*/
_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"});
}
},
/*
* Window zoom
*/
_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);
});
},
/**
* Whether the window scrolls with the scroll bar
*/
_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);
});
},
/**
* Window movement
*/
_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'});
}
});
},
/*
* Determine whether it is an IE6 browser
* @return {Boolean}
*/
_isIE6: function(){
return navigator.userAgent.match(/MSIE 6.0/)!= null;
}
};