現在テスト済み: IE6+ Firefox、Google ブラウザなどをサポートします。
まず、このコンポーネントの基本的な構成項目を次のように見てみましょう。
次のようにコードをコピーします。
this.config = {
targetCls : '.clickElem', // 要素をクリックします
title: '私はロンエンです', // ウィンドウタイトル
content : 'text:<p>私はドラゴンです</p>',
//コンテンツ: 'img:http://www.baidu.com/a.jpg',
// ウィンドウのコンテンツ {text: 特定のコンテンツ ID: ID 名 | img: 画像リンク |
// iframe:src リンク} {string}
width: 400, // コンテンツの幅
height : 300, //コンテンツの高さ
height : 30, // タイトルのデフォルトの高さは 30 です
rag : true, // デフォルトでドラッグできるかどうかは true
time: 3000, // ウィンドウを自動的に閉じる時間が空または「未定義」の場合、ウィンドウは閉じられません。
showBg: true, // マスクレイヤーを表示するかどうかを設定します。デフォルト値は true です。
closeable : '#window-close', // 閉じるボタン
bgColor : '#000', //デフォルトの色
opacity: 0.5,//デフォルトの透明度
位置 ： {
×：0、
y: 0 //デフォルトは0に等しく、中央揃えです
}、
zインデックス: 10000、
isScroll: true, //デフォルトでは、ウィンドウはスクロールに合わせてスクロールします
isResize : true, // デフォルトでウィンドウのスケーリングに合わせてスケーリングします
callback: null//ポップアップウィンドウ表示後のコールバック関数
};
JS で簡単なポップアップ プラグインを作成します (デモとソース コードを含む)
2013-12-11 22:30 by Long En0707、409 読み取り、1 コメント、コレクション、編集
最近あまりプロジェクトが終わっていないのですが、今日たまたま休みだったので、この時間を使って簡単な JS ポップアップ関数を勉強しました。もちろん、オンラインにはプラグインがたくさんあります。もちろん、私が毎日使用しているポップアップ プラグインには、自分のポップアップのアイデアを実現するための機能がたくさんあります。基本的な機能はできているかもしれないので、より完成度を高めたい場合は、今後も最適化を続けていく必要があります。欠点があれば！私を許してください！
ポップアップ ウィンドウがどのようなものであるかは誰もが知っているので、今回はデモ レンダリングを行いませんでした。現在テスト済み: IE6+ Firefox、Google ブラウザなどをサポートします。
まず、このコンポーネントの基本的な構成項目を次のように見てみましょう。
Ctrl+C を押してコードをコピーします
Ctrl+C を押してコードをコピーします
1. タイトルコンテンツ、タイトルの高さ、コンテンツの幅と高さの設定をサポート、ポップアップウィンドウをドラッグした後にウィンドウを自動的に閉じることができるかどうか、マスクの背景色と透明度の設定を表示するかどうか、デフォルトの x 軸 0 と y 軸 0 は、中央揃えの場合、x 軸と y 軸の位置を自分で設定することもできますが、X 軸と y 軸の位置は変更されることに注意してください。 y 軸は親要素を基準とします。親要素の相対位置が指定されていない場合、デフォルトではドキュメントを基準とします。もちろん、ウィンドウのコンテンツの幅と高さがブラウザの 1 つの画面の幅と高さを超えることはお勧めできません。他の人のポップアップを使用したため、最初の画面の幅と高さよりも小さくするようにしてください。以前のプラグインでは、ブラウザにスクロール バーがあるため、コンテンツの幅と高さが大きくてもウィンドウを閉じることができませんでした。ウィンドウには自動的にスクロール バーが表示されます。
2. ウィンドウのコンテンツ設定項目は 4 種類をサポートします。 1. テキスト (テキスト) は次のように設定できます。 <p>I am Long En</p>
2. img (画像) 次のように img を設定できます: http://www.baidu.com/a.jpg
3. id (id ノード) は次のように設定できます。「id:XX」
4. iframe は次のように設定できます。「iframe:http://www.baidu.com (iframe アドレス)」
3. ポップアップ ウィンドウの後にコールバック関数を提供します。たとえば、ポップアップ ウィンドウの後にやりたいことを実行できます。
したがって、ポップアップ ウィンドウ コンポーネントについては何も言うことはありません。もちろん、自分のプロジェクトで CSS スタイルを使用したい場合は、自分で書き直すこともできますが、基本的なものだけを完成させました。 JS のポップアップ ウィンドウ ビジネス関数。
HTML コードは次のとおりです。
次のようにコードをコピーします。
<div style="margin-top:10px;">私はLong Enです。クリックしてください</div>
<div style="margin-top:10px;">私はLong Enです。クリックしてください</div>
CSSコードは次のとおりです
次のようにコードをコピーします。
<style type="text/css">
*{マージン:0;パディング:0;リストスタイルタイプ:なし;}
a,img{ボーダー:0;}
ボディ{font:12px/180% Arial、Helvetica、サンセリフ;}
ラベル{カーソル:ポインタ;}
#window-box{ボーダー:5px ソリッド #E9F3FD;背景:#FFF;}
.window-title{position:relative;height:30px;border:1px Solid #A6C9E1;overflow:hidden;background:url(images/tipbg.png) 0 0repeat-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{パディング:5px 0 5px 5px;}
</スタイル>
JSコードは以下の通りです
次のようにコードをコピーします。
/**
*JSポップアップウィンドウコンポーネントを書く
* @日付 2013-12-10
* @author tugenhua
* @メール [email protected]
*/
関数オーバーレイ(オプション){
this.config = {
targetCls : '.clickElem', // 要素をクリックします
title: '私はロンエンです', // ウィンドウタイトル
content : 'text:<p>私はLong Enです</p>',
//コンテンツ: 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
// ウィンドウのコンテンツ {text: 特定のコンテンツ ID: ID 名 | img: 画像リンク |
// iframe:src リンク} {string}
width: 400, // コンテンツの幅
height : 300, //コンテンツの高さ
height : 30, // タイトルのデフォルトの高さは 30 です
rag : true, // デフォルトでドラッグできるかどうかは true
time: 3000, // ウィンドウを自動的に閉じる時間が空または「未定義」の場合、ウィンドウは閉じられません。
showBg: true, // マスクレイヤーを表示するかどうかを設定します。デフォルト値は true です。
closeable : '#window-close', // 閉じるボタン
bgColor : '#000', //デフォルトの色
opacity: 0.5,//デフォルトの透明度
位置 ： {
×：0、
y: 0 //デフォルトは0に等しく、中央揃えです
}、
zインデックス: 10000、
isScroll: true, //デフォルトでは、ウィンドウはスクロールに合わせてスクロールします
isResize : true, // デフォルトでウィンドウのスケーリングに合わせてスケーリングします
callback: null//ポップアップウィンドウ表示後のコールバック関数
};
this.cache = {
isrender: true, // ポップアップ HTML 構造は 1 回だけレンダリングされます
isshow: false, // ウィンドウが表示されているかどうか
移動可能 : false
};
this.init(オプション);
}
オーバーレイ.プロトタイプ = {
コンストラクター: オーバーレイ、
init: 関数(オプション){
this.config = $.extend(this.config,options || {});
var self = これ、
_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('#ウィンドウボックス');
// ウィンドウはスクロールバーでスクロールします
self._windowIsScroll('#ウィンドウボックス');
}、
/*
* ポップアップ HTML 構造のレンダリング
*/
_renderHTML: function(){
var self = これ、
_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">閉じる</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;
// 渡されたコンテンツの形式を決定します
self._contentType();
if(_config.showBg) {
// 背景の幅と高さをレンダリングします
self._renderDocHeight();
$("#windowbg").show();
self.show();
}それ以外 {
$("#windowbg").hide();
self.show();
}
self._showDialogPosition("#ウィンドウボックス");
}それ以外 {
// ポップアップ ウィンドウが作成されていて非表示になっている場合は、それを表示します
self.show();
$("#windowbg").animate({"opacity":_config.opacity},'normal');
if(_config.showBg) {
$("#windowbg").show();
}
self._showDialogPosition("#ウィンドウボックス");
}
$(_config.closeable).unbind('click');
$(_config.closable).bind('click',function(){
// 閉じるボタンをクリックします
self._closed();
});
// レンダリング後のコールバック関数
_config.callback && $.isFunction(_config.callback) && _config.callback();
}、
/**
* ポップアップウィンドウを表示
*/
表示: function(){
var self = これ、
_config = self.config、
_cache = self.cache;
$("#ウィンドウボックス") && $("#ウィンドウボックス").show();
_cache.isshow = true;
if(_config.time == '' || typeof _config.time == '未定義') {
戻る;
}それ以外 {
t && clearTimeout(t);
var t = setTimeout(function(){
self._closed();
},_config.time);
}
}、
/**
* ポップアップウィンドウを非表示にする
*/
非表示: function(){
var self = これ、
_cache = self.cache;
$("#ウィンドウボックス") && $("#ウィンドウボックス").hide();
_cache.isshow = false;
}、
/**
* 渡されるコンテンツのタイプを決定する
*/
_contentType: function(){
var 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);
スイッチ(コンテンツタイプ) {
ケース「テキスト」:
$('#window-content').html(コンテンツ);
壊す;
ケース「ID」:
$('#window-content').html($('#'+content).html());
壊す;
ケース「画像」:
$('#window-content').html("<img src='"+content+"' class='window-img'/>");
壊す;
ケース「iframe」:
$('#window-content').html('<iframe src="'+content+'"scrolling="yes" Frameborder="0"></iframe>');
$("#window-content-border").css({'overflow':'visible'});
壊す;
}
}、
/**
※閉じるボタンをクリックしてください
*/
_closed: function(){
var self = これ、
_config = self.config、
_cache = self.cache;
if(_cache.isshow) {
self.hide();
}
if(_config.showBg) {
$("#windowbg").hide();
}
$("#windowbg").animate({"不透明度":0},'normal');
}、
/**
※ポップアップウィンドウの表示位置はデフォルトでは中央になります。
*/
_showDialogPosition: 関数(コンテナ) {
var self = これ、
_config = self.config、
_cache = self.cache;
$(コンテナ).css({'位置':'絶対','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){
$(コンテナ).offset({'top':offsetTop, 'left':offsetLeft});
}それ以外{
$(コンテナ).offset({'top':_config.position.y,'left':_config.position.x});
}
}、
/**
* 下部の背景の高さをレンダリングします
*/
_renderDocHeight: function(){
var self = これ、
_config = self.config;
$("#windowbg").animate({"opacity":_config.opacity},'normal');
if(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: function(elem){
var self = これ、
_config = self.config;
$(ウィンドウ).unbind('resize');
$(ウィンドウ).bind('resize',function(){
t && clearTimeout(t);
var t = setTimeout(function(){
if(_config.isResize){
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
}、
/**
* スクロールバーでウィンドウをスクロールするかどうか
*/
_windowIsScroll: 関数(要素){
var self = これ、
_config = self.config;
$(ウィンドウ).unbind('スクロール');
$(ウィンドウ).bind('スクロール',function(){
t && clearTimeout(t);
var t = setTimeout(function(){
if(_config.isScroll){
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
}、
/**
* ウィンドウの移動
*/
_windowMove: function(){
var self = これ、
_config = self.config、
_cache = self.cache;
var マウスX = 0、
マウスY = 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'});
});
$(ドキュメント).mouseup(function(){
if(!_cache.moveable) {
戻る;
}
$('.window-title').css({'cursor':'default'});
_cache.moveable = false;
});
$('#ウィンドウボックス').mousemove(function(e){
if(_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;
}
};