JavaScript - 開啟視窗 (jQuery dialog、window.open）

使用 windown.open

基本用法

    var vid = window.open(/*URL*/, /*"名稱"*/, /*"參數"*/); // 開啟視窗
    vid.close();    // 關閉視窗

    註：子視窗要呼叫父視窗的語法為 window.opener.XXX

    如：window.opener.document....、window.opener.js的func名稱()

呼叫 OpenViewer 開啟視窗

function OpenViewer(URL, WIDTH, HEIGHT) {
    var TOP = (screen.height - HEIGHT) / 2 - 50;
    var LEFT = (screen.width - WIDTH) / 2;
    if (TOP <= 0)   TOP = 0;
    if (LEFT <= 0)   LEFT = 0;
    var Settings = 'height='+HEIGHT+','+'width='+WIDTH+','+'top='+TOP+','+'left='+LEFT+',scrollbars';
    Settings += ', menubar=yes';
    theViewer = window.open(URL, "", Settings);
    return;
}

 

呼叫 myViewer 開啟視窗

呼叫 closeAllViewer 關閉所有已開啟視窗

var _TOP='',_LEFT='',_VNAME=[],_VID=[];
var _MENUBAR=1,_RESIZABLE=2,_SCROLLBARS=4,_STATUS=8,_TOOLBAR=16,_MULTIVIEW=32,_DEPONMOUSE=64;
function myViewer(URI, WIDTH, HEIGHT, OPTION)
{
    var _ONAME = (arguments.length == 5) ? ((OPTION&_MULTIVIEW) ? ReturnStr(arguments[arguments.length-1]) : arguments[arguments.length-1]) : '';
    var NUM  = 0;
    var TOP  = (_TOP == '') ? ((((screen.height-HEIGHT)/2-50)>0)?((screen.height-HEIGHT)/2-50):0) : _TOP;
    var LEFT = (_LEFT == '') ? ((((screen.width-WIDTH)/2)>0)?((screen.width-WIDTH)/2):0) : _LEFT;
    var SETS = 'height='+HEIGHT+','+'width='+WIDTH+','+'top='+TOP+','+'left='+LEFT;

    if (_ONAME.length) {
        var i = 0;
        var result = new Boolean(false);

        for (i = 1; i < _VNAME.length; i++) {
            if (_VNAME[i] == _ONAME) {
                result = true;
                break;
            }
        }
        if (result == true)     NUM = i;
        else                    NUM = _VNAME.length+1;
        _VNAME[NUM] = _ONAME;

        if (typeof(_VID[NUM]) == 'undefined')
            _VID[NUM] = '';
    } else {
        _VNAME[NUM] = ReturnStr('viewer_');
        if (typeof(_VID[NUM]) == 'undefined')
            _VID[NUM] = '';
    }

    if (OPTION&_MENUBAR)        SETS += ',menubar=yes';
    if (OPTION&_RESIZABLE)      SETS += ',resizable=yes';
    if (OPTION&_SCROLLBARS)     SETS += ',scrollbars';
    if (OPTION&_STATUS)         SETS += ',status';
    if (OPTION&_TOOLBAR)        SETS += ',toolbar';
    if (!(OPTION&_MULTIVIEW)) {
        if (_VID[NUM] != '')
            _VID[NUM].close();
    }

    _VID[NUM] = window.open(((URI.charAt(URI.indexOf("//")+2) == '[')? URI : encodeURI(URI)), _VNAME[NUM], SETS);

/* Attention: in order to avoid 'event undefined' in Firefox, if OPTION include _DEPONMOUSE remind to add 'getmouseevent(event)' at UI*/
    if (OPTION&_DEPONMOUSE){
        if(typeof(window.event) == 'undefined'){
                _VID[NUM].moveTo(eva.screenX-WIDTH/2, eva.screenY+10);
        }else{
                _VID[NUM].moveTo(window.event.screenX-WIDTH/2, window.event.screenY+10);
        }
    }
    return _VID[NUM];
}

function closeAllViewer()
{
    for (var NUM in _VID) {
        if (_VID[NUM] == '')    break;
        else                    _VID[NUM].close();
    }
}

使用 jQuery dialog

效果：

用法：

    var contentValue = 'contentText';
    var titleValue = 'titleText';
    $('<div id=\"entryview\"></div>').appendTo($('body'));
    $('#entryview').dialog({
        width: 500,
        height: 450,
        title: titleValue,
        collapsible: false,
        closable: true,
        draggable: false,
        cache: false,
        content: contentValue,
        onOpen: function() { // 一開始會呼叫的 func
            console.log('onOpen');
        },
        onClose: function() { // 關閉會呼叫的 func
            console.log('onClose');
        }
    });

註：contentValue 可放HTML語法