"common_dialog.js"を使用したダイアログ表示

hoge_fuga_dialog.html

<script>
    $(function() {
        $('#open_hoge_dialog').click(function() {
            HogeFugaDialog.open(this.id);
        });
        $('#open_fuga_dialog').click(function() {
            HogeFugaDialog.open(this.id);
        });
    });
</script>
<input type="button" id="open_hoge_dialog" value="hoge"/>
<input type="button" id="open_fuga_dialog" value="fuga"/>

<div id="hoge_dialog" style="display:none">
    <span></span>
</div>
<div id="fuga_dialog" style="display:none">
    <span></span>
</div>

hoge_fuga_dialog.js

/**
 * HogeFugaダイアログの表示制御を行う
 */
var HogeFugaDialog = {

    /**
     * 個別設定を定義する
     */
    dialogOpt: {
        open_hoge_dialog: {
            id: '#hoge_dialog',
        },
        open_fuga_dialog: {
            id: '#fuga_dialog',
            position: {
                my: 'left top',
                at: 'center bottom',
                of: '#open_fuga_dialog'
            },
        }
    },

    /**
     * ダイアログを表示する
     * @param {string} id 表示するダイアログを決定するid
     */
    open: function(id) {
        switch (id) {
            case 'open_hoge_dialog':
                this.initHogeDialog();
                break;
            case 'open_fuga_dialog':
                this.initFugaDialog();
                break;
        }
        CommonDialog.init(this.dialogOpt[id]);
        CommonDialog.open();
    },

    //-------------------------------------------
    // initializer
    //-------------------------------------------

    /**
     * hoge
     */
    initHogeDialog: function() {
        $('#hoge_dialog').children('span').text('hoge dialog');
    },

    /**
     * fuga
     */
    initFugaDialog: function() {
        $('#fuga_dialog').children('span').text('fuga dialog');
    }
}