擬似ウィンドウを作成するjQuery

ウィンドウ内に自分で定義した擬似ウィンドウを表示するjQueryを作成しましたので紹介します。

jquery.funcHoverDiv.jsという名前でプラグイン化しましたので良ければ使用してみて下さい

動作確認済み環境
  • jQuery 2.0.3
  • Internet Explorer 10 / 11
  • Google Chrome 43.0
擬似ウィンドウを作成するjQuery
  1. jquery.funcHoverDiv.jsの使い方
  2. jquery.funcHoverDiv.jsのソースコード

jquery.funcHoverDiv.jsの使い方

このプラグインは、自前で用意した要素の表示を行います。まずは、このような形でウィンドウを定義します。

Titile
HTML
<!-- ウィンドウの大枠 -->
<div id="hoverdiv">
      <!-- ヘッダ部 -->
      <div id="headerdiv">Titile</div>
      <!-- コンテンツの領域 -->
      <div class="contents">
            <!-- ウィンドウを閉じるための要素 -->
            <input type="button" value="Close" id="closebtn" />
      </div>
</div>
CSS
#hoverdiv{
    width: 300px;
    height: 300px;
    border: 1px solid #aaa;
    background: #fff;
    text-align: center;
}
#headerdiv{
    width: 100%;
    height: 20px;
    background: #5F83CD;
    font-weight: bold;
    color: #fff;
    padding: 5px 0px;
}
.contents{
    margin:10px;
    text-align: center;
}

ウィンドウの定義をした後は、jquery.funcHoverDiv.jsを読み込ませ、以下のスクリプトにて擬似ウィンドウを作成します。

jQuery
$(function(){
        $('擬似ウィンドウを表示させる要素のID').funcHoverDiv({
            hoverid:'#hoverdiv',  // 擬似ウィンドウのID
            dragid:'#headerdiv',  // ドラッグ移動可能な要素のID
            closeid:'#closebtn',   // 擬似ウィンドウを閉じる要素のID
            isModal: false,         // モーダル化
            width:'300px',         // 擬似ウィンドウのwidth
            height:'300px'         // 擬似ウィンドウのheight
        });
});

Titile

モーダル化させる場合は、以下のパラメータを変更します。

jQuery
$(function(){
        $('擬似ウィンドウを表示させる要素のID').funcHoverDiv({
            hoverid:'#hoverdiv',  // 擬似ウィンドウのID
            dragid:'#headerdiv',  // ドラッグ移動可能な要素のID
            closeid:'#closebtn',   // 擬似ウィンドウを閉じる要素のID
            isModal: true,         // モーダル化 ★ここを変更
            width:'300px',         // 擬似ウィンドウのwidth
            height:'300px'         // 擬似ウィンドウのheight
        });
});

Titile

jquery.funcHoverDiv.jsのソースコード

jquery.funcHoverDiv.js
(function($){ 
    $.fn.funcHoverDiv = function(userOptions){
        var elements = this;
        var defaults = {hoverid:'',
                        dragid:'', 
                        closeid:'',
                        isModal:false,
                        width: "300px",
                        height: "300px"};
        
        var option = $.extend(defaults,userOptions);

        $(option.hoverid).css('display', 'none');
        
        var default_pos_left;
        var default_pos_top;
        
        $(this).click(function(){
            var win_width = window.innerWidth;
            var win_height = window.innerHeight;
            var $hover = $(option.hoverid);

            $hover.css('display', 'block');
            $hover.css('width', option.width);
            $hover.css('height', option.height);
            
            default_pos_left = (win_width / 2) - ($hover.width() / 2);
            default_pos_top = (win_height / 2) - ($hover.height() / 2);
            $hover.css('position', 'fixed');
            $hover.css('left', default_pos_left);
            $hover.css('top', default_pos_top);
            $hover.css('z-index', 99);
            if(option.isModal){
                if(!$("#popup-background")[0]){
                    var $div = $("
"); $div.css('display', 'block'); $div.css('position', 'fixed'); $div.css('top', '0'); $div.css('left', '0'); $div.css('height', '100%'); $div.css('width', '100%'); $div.css('background', '#000'); $div.css('opacity', '0.60'); $div.css('margin', '0'); $div.css('padding', '0'); $(document.body).append($div); } else{ $("#popup-background").css('display', 'block'); } } }); var down_flg = false; $(option.dragid).mousedown(function(e){ var pagex = e.pageX; var pagey = e.pageY; var $hover = $(option.hoverid); down_flg = true; $(document).mousemove(function(e){ if(!down_flg) return; default_pos_left = default_pos_left + (e.pageX - pagex); pagex = pagex + e.pageX - pagex; default_pos_top = default_pos_top + (e.pageY - pagey); pagey = pagey + e.pageY - pagey; $hover.css('left', default_pos_left); $hover.css('top', default_pos_top); }).mouseup(function(){ $(document).off("mousemove"); down_flg = false; }); }); $(option.closeid).click(function(){ $(option.hoverid).css('display', 'none'); if(option.isModal){ $("#popup-background").css('display', 'none'); } }); return(this); }; })(jQuery);
divider

Trackback URL

http://webnonotes.com/javascript-2/fake-window/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>