Derzeit getestet: Unterstützt IE6+ Firefox, Google-Browser usw.
Schauen wir uns zunächst die grundlegenden Konfigurationselemente dieser Komponente an: wie folgt:
Kopieren Sie den Codecode wie folgt:
this.config = {
targetCls: '.clickElem', // Klicken Sie auf das Element
Titel: „Ich bin Long En“, // Fenstertitel
Inhalt: 'Text:<p>Ich bin ein Drache</p>',
//content: 'img:http://www.baidu.com/a.jpg',
// Fensterinhalt {text: spezifischer Inhalt |. id: id name |
// iframe:src link} {string}
Breite: 400, // Breite des Inhalts
Höhe: 300, //Höhe des Inhalts
height : 30, // Die Standardhöhe des Titels beträgt 30
Drag: true, // Ob es standardmäßig gezogen werden kann, ist true
time: 3000, // Wenn die Zeit zum automatischen Schließen des Fensters leer oder „undefiniert“ ist, wird es nicht geschlossen.
showBg: true, // Legen Sie fest, ob die Maskenebene angezeigt werden soll. Der Standardwert ist true mask.
verschließbar: '#window-close', // Schaltfläche zum Schließen
bgColor: '#000', //Standardfarbe
Deckkraft: 0,5,//Standardtransparenz
Position: {
x: 0,
y: 0 // Der Standardwert ist gleich 0, zentriert
},
zIndex: 10000,
isScroll: true, // Standardmäßig scrollt das Fenster beim Scrollen
isResize: true, // Standardmäßig mit Fensterskalierung skalieren
Rückruf: null // Rückruffunktion, nachdem das Popup-Fenster angezeigt wird
};
Schreiben Sie ein einfaches Popup-Plug-in in JS (einschließlich Demo und Quellcode)
11.12.2013 22:30 von Long En0707, 409 Mal gelesen, 1 Kommentar, Sammlung, Bearbeiten
Ich habe in letzter Zeit nicht viele Projekte abgeschlossen und habe heute zufällig eine Pause gemacht, also habe ich mir die Zeit genommen, die einfache JS-Popup-Funktion zu studieren. Natürlich gibt es viele Plug-Ins online, und das habe ich getan Ich habe mir den Quellcode der Plug-Ins im Internet nicht genau angesehen. Die Pop-Up-Plug-Ins, die ich täglich verwende, haben natürlich viele Funktionen Möglicherweise sind die Grundfunktionen bereits erreicht. Wenn ich es also besser und vollständiger machen möchte, muss ich es in Zukunft weiter optimieren! Wenn es irgendwelche Mängel gibt! Bitte verzeihen Sie mir!
Da jeder weiß, wie das Popup-Fenster aussieht, habe ich dieses Mal kein Demonstrationsrendering durchgeführt! Derzeit getestet: Unterstützt IE6+ Firefox, Google-Browser usw.
Schauen wir uns zunächst die grundlegenden Konfigurationselemente dieser Komponente an: wie folgt:
Drücken Sie Strg+C, um den Code zu kopieren
Drücken Sie Strg+C, um den Code zu kopieren
1. Unterstützung beim Konfigurieren des Titelinhalts, der Höhe des Titels, der Breite und Höhe des Inhalts, ob das Fenster nach dem Ziehen des Popup-Fensters automatisch geschlossen werden kann, ob die Konfiguration der Maskenhintergrundfarbe und -transparenz angezeigt werden soll, und die Anzeigeposition des Fensters sind standardmäßig x-Achse 0 und y-Achse 0. Für die Mittenausrichtung können Sie die Position der x-Achse und y-Achse auch selbst konfigurieren, aber bitte beachten Sie, dass die X-Achse und Die y-Achse ist relativ zum übergeordneten Element. Wenn die relative Positionierung des übergeordneten Elements nicht angegeben ist, erfolgt sie standardmäßig relativ zum Dokument. Natürlich wird nicht empfohlen, dass die Breite und Höhe des Fensterinhalts die Breite und Höhe eines Browserbildschirms überschreitet. Versuchen Sie, kleiner zu sein als die Breite und Höhe des ersten Bildschirms In der Vergangenheit war es nach dem Klicken auf die Schaltfläche „Schließen“ vorhanden, da der Browser über eine Bildlaufleiste verfügt. Nach dem Auslösen des Bildlaufleistenereignisses kann das Fenster nicht geschlossen werden. Wenn die Breite und Höhe des Inhalts groß ist, spielt dies keine Rolle . Das Fenster verfügt automatisch über Bildlaufleisten.
2. Die Inhaltskonfigurationselemente des Fensters unterstützen vier Arten von Text (Text), der wie folgt konfiguriert werden kann: <p>Ich bin Long En</p>
2. img (Bild) Sie können img wie folgt konfigurieren: http://www.baidu.com/a.jpg
3. ID (ID-Knoten) kann wie folgt konfiguriert werden: 'id:XX'
4. Iframe kann wie folgt konfiguriert werden: „iframe:http://www.baidu.com (iframe-Adresse)“
3. Stellen Sie nach dem Popup-Fenster eine Rückruffunktion bereit: Sie können beispielsweise nach dem Popup-Fenster tun, was Sie tun möchten.
Zur Popup-Fensterkomponente gibt es also nichts zu sagen. Wenn Sie den CSS-Stil in Ihrem eigenen Projekt verwenden möchten, können Sie ihn natürlich nicht zu Tode schreiben, sondern nur die Grundlagen vervollständigen Popup-Fenster Geschäftsfunktionen von JS.
Der HTML-Code lautet wie folgt:
Kopieren Sie den Codecode wie folgt:
<div style="margin-top:10px;">Ich bin Long En, bitte klicken Sie auf mich</div>
<div style="margin-top:10px;">Ich bin Long En, bitte klicken Sie auf mich</div>
Der CSS-Code lautet wie folgt
Kopieren Sie den Codecode wie folgt:
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, serifenlos;}
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>
Der JS-Code lautet wie folgt
Kopieren Sie den Codecode wie folgt:
/**
*Schreiben Sie eine JS-Popup-Fensterkomponente
* @Datum 10.12.2013
* @author tugenhua
* @email [email protected]
*/
Funktion Overlay(Optionen){
this.config = {
targetCls: '.clickElem', // Klicken Sie auf das Element
Titel: „Ich bin Long En“, // Fenstertitel
Inhalt: 'Text:<p>Ich bin Long En</p>',
//content: 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
// Fensterinhalt {text: spezifischer Inhalt |. id: id name |
// iframe:src link} {string}
Breite: 400, // Breite des Inhalts
Höhe: 300, //Höhe des Inhalts
height : 30, // Die Standardhöhe des Titels beträgt 30
drag : true, // Ob es standardmäßig gezogen werden kann, ist true
time: 3000, // Wenn die Zeit zum automatischen Schließen des Fensters leer oder „undefiniert“ ist, wird es nicht geschlossen.
showBg: true, // Legen Sie fest, ob die Maskenebene angezeigt werden soll. Der Standardwert ist true mask.
verschließbar: '#window-close', // Schaltfläche zum Schließen
bgColor: '#000', //Standardfarbe
Deckkraft: 0,5,//Standardtransparenz
Position: {
x: 0,
y: 0 // Der Standardwert ist gleich 0, zentriert
},
zIndex: 10000,
isScroll: true, // Standardmäßig scrollt das Fenster beim Scrollen
isResize: true, // Standardmäßig mit Fensterskalierung skalieren
Rückruf: null // Rückruffunktion, nachdem das Popup-Fenster angezeigt wird
};
this.cache = {
isrender: true, // Die Popup-HTML-Struktur wird nur einmal gerendert
isshow: false, // Ob das Fenster angezeigt wurde
beweglich: falsch
};
this.init(optionen);
}
Overlay.prototype = {
Konstruktor: Overlay,
init: Funktion(Optionen){
this.config = $.extend(this.config,options || {});
var self = dies,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).each(function(index,item){
$(item).unbind('click');
$(item).bind('click',function(){
// Rendern Sie die Popup-HTML-Struktur
self._renderHTML();
// Fensterbewegung
self._windowMove();
});
});
// Fensterzoom
self._windowResize('#window-box');
// Das Fenster scrollt mit der Bildlaufleiste
self._windowIsScroll('#window-box');
},
/*
* Popup-HTML-Struktur rendern
*/
_renderHTML: function(){
var self = dies,
_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">Schließen</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;
// Bestimmen Sie das Format des übergebenen Inhalts
self._contentType();
if(_config.showBg) {
// Breite und Höhe des Hintergrunds rendern
self._renderDocHeight();
$("#windowbg").show();
self.show();
}anders {
$("#windowbg").hide();
self.show();
}
self._showDialogPosition("#window-box");
}anders {
// Wenn das Popup-Fenster erstellt wurde und nur ausgeblendet ist, zeigen wir es an
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(){
// Klicken Sie auf die Schaltfläche „Schließen“.
self._closed();
});
// Rückruffunktion nach dem Rendern
_config.callback && $.isFunction(_config.callback) && _config.callback();
},
/**
* Popup-Fenster anzeigen
*/
show: function(){
var self = dies,
_config = self.config,
_cache = self.cache;
$("#window-box") && $("#window-box").show();
_cache.isshow = true;
if(_config.time == '' || typeof _config.time == 'undefiniert') {
zurückkehren;
}anders {
t && clearTimeout(t);
var t = setTimeout(function(){
self._closed();
},_config.time);
}
},
/**
* Popup-Fenster ausblenden
*/
verstecken: function(){
var self = dies,
_cache = self.cache;
$("#window-box") && $("#window-box").hide();
_cache.isshow = false;
},
/**
* Bestimmen Sie die Art des übergebenen Inhalts
*/
_contentType: function(){
var self = dies,
_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) {
Fall 'Text':
$('#window-content').html(content);
brechen;
Fall 'id':
$('#window-content').html($('#'+content).html());
brechen;
Fall 'img':
$('#window-content').html("<img src='"+content+"' class='window-img'/>");
brechen;
Fall 'iframe':
$('#window-content').html('<iframe src="'+content+'" scrolling="yes" frameborder="0"></iframe>');
$("#window-content-border").css({'overflow':'visible'});
brechen;
}
},
/**
* Klicken Sie auf die Schaltfläche „Schließen“.
*/
_closed: function(){
var self = dies,
_config = self.config,
_cache = self.cache;
if(_cache.isshow) {
self.hide();
}
if(_config.showBg) {
$("#windowbg").hide();
}
$("#windowbg").animate({"opacity":0},'normal');
},
/**
* Die Position, an der das Popup-Fenster angezeigt wird, ist standardmäßig zentriert
*/
_showDialogPosition: function(container) {
var self = dies,
_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();
// Bestimmen Sie, ob die x- und y-Position standardmäßig gleich 0 ist. Wenn ja, zentrieren Sie sie, andernfalls positionieren Sie sie entsprechend der übergebenen Position neu.
if(0 === _config.position.x && 0 === _config.position.y){
$(container).offset({'top':offsetTop, 'left':offsetLeft});
}anders{
$(container).offset({'top':_config.position.y,'left':_config.position.x});
}
},
/**
* Rendern Sie die Höhe des unteren Hintergrunds
*/
_renderDocHeight: function(){
var self = dies,
_config = self.config;
$("#windowbg").animate({"opacity":_config.opacity},'normal');
if(self._isIE6()){
$("#windowbg").css({'background':'#fff','height':$(document).height()+'px','width':$(document).width()+ "px"});
}anders {
$("#windowbg").css({'background':_config.bgColor,'height':$(document).height()+'px','width':$(document).width()+" px"});
}
},
/*
* Fensterzoom
*/
_windowResize: function(elem){
var self = dies,
_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);
});
},
/**
* Ob das Fenster mit der Bildlaufleiste scrollt
*/
_windowIsScroll: function(elem){
var self = dies,
_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);
});
},
/**
* Fensterbewegung
*/
_windowMove: function(){
var self = dies,
_config = self.config,
_cache = self.cache;
var mouseX = 0,
MausY = 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) {
zurückkehren;
}
$('.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'});
}
});
},
/*
* Stellen Sie fest, ob es sich um einen IE6-Browser handelt
* @return {Boolean}
*/
_isIE6: function(){
return navigator.userAgent.match(/MSIE 6.0/)!= null;
}
};