ポップアッププラグイン機能のjs実装サンプルコード共有

現在テスト中: IE6、Firefox、Google ブラウザなどをサポートしています。

まず、このコンポーネントの基本的な構成項目を次のように見てみましょう:

コードをコピーコードは次のとおりです。

this.config = {

targetCls : '.clickElem', // 要素をクリックします
title: 'I am Long En', // ウィンドウタイトル
content : 'text:

私はドラゴンです

',
//content : 'img:http://www.baidu.com/a.jpg',
// window content {text: specificコンテンツ | id: ID 名 | img: 画像リンク |
// iframe:src リンク} {string}
width: 400, // コンテンツの幅
高さ : 300, // コンテンツの高さ
height : 30, // タイトルの高さはデフォルトで 30
rag : true, // ドラッグできるかどうかはデフォルトで true
time : 3000, // ウィンドウが自動的に閉じるまでの時間はempty または 'unknown' 閉じない
showBg : true, // マスクレイヤをデフォルトで表示するかどうかを設定します。 Mask
closeable : '#window-close', // Close button
bgColor : ' #000', // デフォルトの色
不透明度 : 0.5, // デフォルトの透明度
位置 : {
x: 0,
y: 0 // デフォルトは 0 に等しい中心
},
zIndex : 10000 ,
isScroll : true, //デフォルトでは、ウィンドウのスクロールに合わせてウィンドウもスクロールします
isResize : true, Function

};

JS で簡単なポップアッププラグインを作成します (デモとソースコードを含む)

2013-12-11 22:30 by Long En0707、409 読み取り、1 件のコメント、お気に入り、編集
プロジェクトは完了しましたが、状況はあまり変わっていません。今日はたまたまお休みだったので、この時間を利用して簡単な JS ポップアップウィンドウ関数を勉強しました。もちろん、インターネット上にはたくさんのプラグインがあります。もちろん、私はインターネット上のプラグインのソースコードを注意深く見ませんでした。ただ、自分のポップアップウィンドウを頼りにしました。このプラグインには、自分のポップアップのアイデアを実現するための機能がたくさんあります。基本的な機能はできているかもしれないので、もっと充実させたい場合は今後も最適化を続けていく必要があります！欠点があれば！私を許してください！

ポップアップウィンドウがどのようなものであるかは誰もが知っているので、今回はデモレンダリングを行いませんでした。現在テスト済み: IE6 Firefox、Google ブラウザなどをサポートします。

まず、このコンポーネントの基本的な構成項目を次のように見てみましょう:

Ctrl C を押してコードをコピーします

1. タイトルの内容、タイトルの高さ、コンテンツの幅と高さ、ポップアップウィンドウをドラッグした後にウィンドウを自動的に閉じることができるかどうかの設定をサポートします。マスクの背景色と透明度の設定を表示するかどうか、およびウィンドウの設定を表示します。表示位置はデフォルトで x 軸 0 と y 軸 0 になり、中央揃えで配置されます。また、x 軸の位置を設定することもできます。軸と Y 軸は自分で設定できますが、親要素の相対位置を指定しない場合、X 軸と Y 軸は親要素に対して相対的な位置になることに注意してください。もちろん、ウィンドウのコンテンツの幅と高さがブラウザの 1 つの画面の幅と高さを超えることはお勧めできません。他の人のポップアップを使用したため、最初の画面の幅と高さよりも小さくするようにしてください。以前のプラグインでは、ブラウザにスクロールバーがあるため、コンテンツの幅と高さが大きくてもウィンドウを閉じることができませんでした。ウィンドウには自動的にスクロールバーが表示されます。

2. ウィンドウのコンテンツ設定項目は 1. テキスト (テキスト) の 4 種類をサポートします:

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 コードは次のとおりです:

コードをコピーコードは次のとおりです:

私は Long En です、クリックしてください

私は Long En です。クリックしてください

CSSコードは次のとおりです

コードをコピーコードは次のとおりです:

JSコードは以下の通りです

コードをコピーコードは次のとおりです:

/**
* 编写JS弹窗组件
* @date 2013-12-10
* @author tugenhua
* @email 879083421@qq.com
*/

function Overlay(options){

this.config = {

targetCls   :   '.clickElem',   // 点击元素
title: '我是龙恩',      // 窗口标题
content     : 'text:

我是龙恩

',
//content     : 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
     // 窗口内容 {text:具体内容 | id:id名 | img:图片链接 |
     // iframe:src链接} {string}
width: 400,      // 内容的宽度
height      : 300,      // 内容的高度
theight     : 30,// 标题的高度默认为30
drag : true,     // 是否可以拖动默认为true
time : 3000,     // 自动关闭窗口的时间为空或者'undefined'则不关闭
showBg      : true,     // 设置是否显示遮罩层默认为true 遮罩
closable    : '#window-close', // 关闭按钮
bgColor     : '#000',   // 默认颜色
opacity     : 0.5,// 默认透明度
position    : {
     x: 0,
     y: 0   //默认等于0 居中
},
zIndex      :     10000,
isScroll    : true,      //默认情况下窗口随着滚动而滚动
isResize    : true,      // 默认情况下随着窗口缩放而缩放
callback    : null//弹窗显示后回调函数

};

    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+= '

' +
      '';

     $('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();
     }else {
$("#windowbg").hide();
self.show();
     }
     self._showDialogPosition("#window-box");
}else {

     // 如果弹窗已经创建出来的话, 只是隐藏掉了, 那么我们显示出来
     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(){
     // 点击关闭按钮
     self._closed();
});

// 渲染后回调函数
_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});
}
     },
     /**
* 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"});
}

      },
      /*
* 窗口缩放
*/
      _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'});
     }

});

     },
     /*
      * 判断是否是IE6游览器
      * @return {Boolean}
      */
     _isIE6: function(){
return navigator.userAgent.match(/MSIE 6.0/)!= null;
     }

};

ポップアッププラグイン機能のjs実装サンプルコード共有_javascriptスキル