На данный момент протестировано: поддерживает IE6+ Firefox, браузер Google и т. д.
Давайте сначала рассмотрим основные элементы конфигурации этого компонента:
Скопируйте код кода следующим образом:
this.config = {
targetCls : '.clickElem', // Щелкаем по элементу
title: 'Я Лонг Эн', // заголовок окна
content : 'text:<p>Я дракон</p>',
//содержимое: 'img:http://www.baidu.com/a.jpg',
// Содержимое окна {текст: конкретный идентификатор содержимого | имя идентификатора img: ссылка на изображение |
// iframe: ссылка на источник} {строка}
ширина: 400, // ширина контента
height: 300, //Высота контента
height : 30, // Высота заголовка по умолчанию — 30
перетаскивание: true, // Можно ли перетаскивать по умолчанию — true
time: 3000, // Если время автоматического закрытия окна пусто или «не определено», оно не закроется.
showBg: true, // Устанавливаем, отображать ли слой маски. Значение по умолчанию — true Mask.
closeable : '#window-close', // кнопка закрытия
bgColor : '#000', //Цвет по умолчанию
непрозрачность: 0,5, // прозрачность по умолчанию
позиция : {
х: 0,
y: 0 //По умолчанию равно 0, по центру
},
zИндекс: 10000,
isScroll: true, //По умолчанию окно прокручивается при прокрутке
isResize : true, // Масштабирование с масштабированием окна по умолчанию
обратный вызов: null // Функция обратного вызова после отображения всплывающего окна
};
Напишите простой плагин всплывающего окна на JS (включая демо и исходный код)
2013-12-11 22:30, Long En0707, 409 прочтений, 1 комментарий, коллекция, редактирование
В последнее время я завершил не так много проектов, а сегодня у меня был перерыв, поэтому я потратил время на изучение простой функции всплывающего окна JS. Конечно, в Интернете есть много плагинов, и я это сделал. Я не внимательно просматривал исходный код плагинов в Интернете. Я просто полагался на них. Плагины всплывающих окон, которые я использую каждый день, имеют очень много функций для реализации моих собственных идей всплывающих окон. возможно, я достиг основных функций, поэтому, если я хочу сделать его лучше и полнее, мне нужно продолжать его оптимизировать в будущем! Если есть недостатки! Пожалуйста, прости меня!
Поскольку все знают, как выглядит всплывающее окно, на этот раз я не стал делать демонстрационный рендеринг! На данный момент протестировано: поддерживает IE6+ Firefox, браузер Google и т. д.
Давайте сначала рассмотрим основные элементы конфигурации этого компонента:
Нажмите Ctrl+C, чтобы скопировать код.
Нажмите Ctrl+C, чтобы скопировать код.
1. Поддержка настройки содержимого заголовка, высоты заголовка, ширины и высоты содержимого, можно ли автоматически закрыть окно после перетаскивания всплывающего окна, отображать ли конфигурацию цвета фона и прозрачности маски, и положение отображения окна. По умолчанию ось X и ось Y 0. Для выравнивания по центру вы также можете настроить положение осей X и Y самостоятельно, но обратите внимание, что оси X и Ось Y относится к родительскому элементу. Если относительное расположение родительского элемента не указано, по умолчанию оно будет относительно документа. Конечно, не рекомендуется, чтобы ширина и высота содержимого окна превышала ширину и высоту одного экрана браузера. Старайтесь быть меньше ширины и высоты первого экрана. Потому что я использовал чужое всплывающее окно. в прошлом оно существовало после нажатия кнопки закрытия, поскольку в браузере есть полоса прокрутки. После запуска события полосы прокрутки окно не может быть закрыто. Если ширина и высота содержимого велики, это не имеет значения. . В окне автоматически появятся полосы прокрутки.
2. Элементы конфигурации содержимого окна поддерживают четыре типа 1. текста (текста). Текст можно настроить следующим образом: <p>I am Long En</p>.
2. img (картинка) Img можно настроить следующим образом: http://www.baidu.com/a.jpg
3. id (идентификатор узла) можно настроить следующим образом: «id:XX»
4. iframe можно настроить следующим образом: «iframe:http://www.baidu.com (адрес iframe)».
3. Предоставьте функцию обратного вызова после всплывающего окна. Например, вы можете делать то, что хотите, после всплывающего окна.
Так что о компоненте всплывающего окна говорить нечего. Конечно, если вы хотите использовать стиль css в своем проекте, вы можете переписать его самостоятельно. Я не дорисовывал JS, а лишь доработал базовое. всплывающие окна бизнес-функций JS.
HTML-код выглядит следующим образом:
Скопируйте код кода следующим образом:
<div style="margin-top:10px;">Я Лонг Эн, пожалуйста, нажмите на меня</div>
<div style="margin-top:10px;">Я Лонг Эн, пожалуйста, нажмите на меня</div>
CSS-код выглядит следующим образом
Скопируйте код кода следующим образом:
<style type="text/css">
* {маржа: 0; дополнение: 0; тип стиля списка: нет;}
а,img{граница:0;}
body{font:12px/180% Arial, Helvetica, без засечек;}
метка {курсор: указатель;}
#window-box{border:5px сплошной #E9F3FD;background:#FFF;}
.window-title{позиция: относительная; высота: 30 пикселей; граница: 1 пиксель сплошной #A6C9E1; переполнение: скрыто; фон: URL (изображения/tipbg.png) 0 0 повтор-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 без повторения;курсор:указатель;}
#window-content-border{padding:5px 0 5px 5px;}
</стиль>
JS-код выглядит следующим образом
Скопируйте код кода следующим образом:
/**
* Написание компонента всплывающего окна JS.
* @дата 10 декабря 2013 г.
* @author тугенхуа
* @электронная почта [email protected]
*/
функция Overlay(опции){
this.config = {
targetCls : '.clickElem', // Щелкаем по элементу
title: 'Я Лонг Эн', // заголовок окна
content : 'text:<p>Я Лонг Эн</p>',
//содержимое: 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
// Содержимое окна {текст: конкретный идентификатор содержимого | имя идентификатора img: ссылка на изображение |
// iframe: ссылка на источник} {строка}
ширина: 400, // ширина контента
height: 300, //Высота контента
height : 30, // Высота заголовка по умолчанию — 30
перетаскивание: true, // Можно ли перетаскивать по умолчанию — true
time: 3000, // Если время автоматического закрытия окна пусто или «не определено», оно не закроется.
showBg: true, // Устанавливаем, отображать ли слой маски. Значение по умолчанию — true Mask.
closeable : '#window-close', // кнопка закрытия
bgColor : '#000', //Цвет по умолчанию
непрозрачность: 0,5, // прозрачность по умолчанию
позиция : {
х: 0,
y: 0 //По умолчанию равно 0, по центру
},
zИндекс: 10000,
isScroll: true, //По умолчанию окно прокручивается при прокрутке
isResize : true, // Масштабирование с масштабированием окна по умолчанию
обратный вызов: null // Функция обратного вызова после отображения всплывающего окна
};
this.cache = {
isrender: true, // HTML-структура всплывающего окна отображается только один раз
isshow: false, // Отобразилось ли окно
подвижный: ложь
};
this.init(опции);
}
Оверлей.прототип = {
конструктор: Overlay,
инициализация: функция (опции) {
this.config = $.extend(this.config,options || {});
вар self = это,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).each(функция(индекс,элемент){
$(пункт).unbind('клик');
$(item).bind('click',function(){
// Отрисовываем HTML-структуру всплывающего окна
self._renderHTML();
// движение окна
self._windowMove();
});
});
// Масштаб окна
self._windowResize('#window-box');
// Окно прокручивается с помощью полосы прокрутки
self._windowIsScroll('#window-box');
},
/*
* Отображение HTML-структуры всплывающего окна.
*/
_renderHTML: функция(){
вар self = это,
_config = self.config,
_cache = self.cache;
вар HTML = '';
если (_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">Закрыть</span></div>'+
'<div id="window-content-border"><div id="window-content"></div></div>' +
'</div>';
$('тело').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 = ложь;
// Определяем формат передаваемого контента
self._contentType();
если (_config.showBg) {
// Отрисовываем ширину и высоту фона
self._renderDocHeight();
$("#windowbg").show();
себя.показать();
}еще {
$("#windowbg").hide();
себя.показать();
}
self._showDialogPosition("#window-box");
}еще {
// Если всплывающее окно создано и просто скрыто, то показываем его
себя.показать();
$("#windowbg").animate({"opacity":_config.opacity},'normal');
если (_config.showBg) {
$("#windowbg").show();
}
self._showDialogPosition("#window-box");
}
$(_config.closable).unbind('клик');
$(_config.closable).bind('click',function(){
// Нажимаем кнопку закрытия
self._closed();
});
// Функция обратного вызова после рендеринга
_config.callback && $.isFunction(_config.callback) && _config.callback();
},
/**
* Показать всплывающее окно
*/
показать: функция() {
вар self = это,
_config = self.config,
_cache = self.cache;
$("#window-box") && $("#window-box").show();
_cache.isshow = правда;
if(_config.time == '' || typeof _config.time == 'не определено') {
возвращаться;
}еще {
т && ClearTimeout(t);
вар т = setTimeout(функция(){
self._closed();
},_config.time);
}
},
/**
* Скрыть всплывающее окно
*/
скрыть: функция(){
вар self = это,
_cache = self.cache;
$("#window-box") && $("#window-box").hide();
_cache.isshow = ложь;
},
/**
* Определить тип переданного контента
*/
_contentType: функция(){
вар self = это,
_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);
переключатель (contentType) {
случай «текст»:
$('#window-content').html(content);
перерыв;
случай 'id':
$('#window-content').html($('#'+content).html());
перерыв;
случай 'img':
$('#window-content').html("<img src=""+content+"' class='window-img'/>");
перерыв;
случай «iframe»:
$('#window-content').html('<iframe src="'+content+'" прокрутка="да" Frameborder="0"></iframe>');
$("#window-content-border").css({'overflow':'visible'});
перерыв;
}
},
/**
* Нажмите кнопку закрытия
*/
_закрыто: функция(){
вар self = это,
_config = self.config,
_cache = self.cache;
если (_cache.isshow) {
себя.скрыть();
}
если (_config.showBg) {
$("#windowbg").hide();
}
$("#windowbg").animate({"opacity":0},'normal');
},
/**
* Положение, в котором отображается всплывающее окно, по умолчанию центрировано.
*/
_showDialogPosition: функция (контейнер) {
вар self = это,
_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});
}еще{
$(container).offset({'top':_config.position.y, 'left':_config.position.x});
}
},
/**
* Рендеринг высоты нижнего фона
*/
_renderDocHeight: функция(){
вар self = это,
_config = self.config;
$("#windowbg").animate({"opacity":_config.opacity},'normal');
если (self._isIE6()) {
$("#windowbg").css({'background':'#fff','height':$(document).height()+'px','width':$(document).width()+ "пх"});
}еще {
$("#windowbg").css({'background':_config.bgColor,'height':$(document).height()+'px','width':$(document).width()+" пикс"});
}
},
/*
* Увеличение окна
*/
_windowResize: функция (элемент) {
вар self = это,
_config = self.config;
$(окно).unbind('изменить размер');
$(окно).bind('изменить размер',функция(){
т && ClearTimeout(t);
вар т = setTimeout(функция(){
если (_config.isResize) {
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
/**
* Прокручивается ли окно с помощью полосы прокрутки
*/
_windowIsScroll: функция (элемент) {
вар self = это,
_config = self.config;
$(окно).unbind('прокрутка');
$(окно).bind('прокрутка',функция(){
т && ClearTimeout(t);
вар т = setTimeout(функция(){
если (_config.isScroll) {
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
/**
* Движение окна
*/
_windowMove: функция(){
вар self = это,
_config = self.config,
_cache = self.cache;
вар mouseX = 0,
мышьY = 0;
$('.window-title').mouseenter(function(){
$(this).css({'курсор':'переместить'});
});
$('.window-title').mouseleave(function(){
$(this).css({'курсор':'default'});
});
$('.window-title').mousedown(function(e){
_cache.moveable = правда;
mouseX = e.clientX - $(this).offset().left;
mouseY = e.clientY - $(this).offset().top;
$('.window-title').css({'курсор':'переместить'});
});
$(документ).mouseup(функция(){
если(!_cache.moveable) {
возвращаться;
}
$('.window-title').css({'курсор':'default'});
_cache.moveable = ложь;
});
$('#window-box').mousemove(function(e){
если (_cache.moveable) {
$(this).css({'left':e.clientX - mouseX + 'px','top':e.clientY - mouseY + 'px'});
}
});
},
/*
* Определите, является ли это браузером IE6.
* @return {логическое значение}
*/
_isIE6: функция(){
return navigator.userAgent.match(/MSIE 6.0/)!= null;
}
};