Currently tested: supports IE6, Firefox, Google browser, etc.
Let’s first take a look at the basic configuration items of this component: as follows:
targetCls : '.clickElem', // Click element
title: 'I am Long En', // Window title
content : 'text:
I am a dragon
',2013-12-11 22:30 by Long En0707, 409 reads, 1 comments, favorites, edits
The recent project has been completed and things have not changed A lot. I happened to be taking a break today, so I took this time to study the simple JS pop-up window function. Of course, there are many plug-ins on the Internet. I didn’t look carefully at the plug-in source code on the Internet. I just relied on the pop-up windows I used daily. The plug-in has so many functions to realize your own pop-up ideas. Of course, I may have achieved the basic functions, so if you want to make it better and more complete, you need to continue to optimize it in the future! If there are any shortcomings! Please forgive me!
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 configuration of the window The display position defaults to x-axis 0 and y-axis 0, which are centered and aligned. 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 you do not specify the relative positioning of the parent element, then by default it will Relative to document. 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.
I am Long En
2. img (picture) can be configured as follows img: 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: 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 it in your own project, you can rewrite the css style yourself. I have not written the JS to death. I just complete the basic pop-up window business functions of JS.
The HTML code is as follows:
CSS code is as follows
The JS code is as follows
function Overlay(options){
this.config = {
targetCls : '.clickElem', // 点击元素
title: '我是龙恩', // 窗口标题
content : 'text:
我是龙恩
',};
this.cache = {
isrender : true, // 弹窗html结构只渲染一次
isshow: false, // 窗口是否已经显示出来
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(){
// 渲染弹窗HTML结构
self._renderHTML();
// 窗口移动
self._windowMove();
});
});
// 窗口缩放
self._windowResize('#window-box');
// 窗口随着滚动条一起滚动
self._windowIsScroll('#window-box');
},
/*
* 渲染弹窗HTML结构
*/
_renderHTML: function(){
var self = this,
_config = self.config,
_cache = self.cache;
var html ='';
if(_cache.isrender) {
html+= '
' + // 渲染后 回调函数
_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("");
break;
case 'iframe':
$('#window-content').html('');
$("#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();
// 判断x,y位置默认是不是等于0 如是的话 居中 否则 根据传进来的位置重新定位
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({'배경':'#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'});
}
});
},
/*
* 判断是否是IE6游览器
* @return {Boolean}
*/
_isIE6: function(){
navigator.userAgent를 반환합니다. .match(/MSIE 6.0/)!= null;
}
};
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
