Lovely Dynamic Div Popup with Ajax Facility

Following is the javascript function
function _$(id){
    if(typeof(id) == "string"){
        if(document.getElementById(id))
            return document.getElementById(id);
        else{
            if(document.getElementsByName(id))
                return document.getElementsByName(id);
            else {
                if(document.getElementsByTagName(id))
                    return document.getElementsByTagName(id);
                else
                    return null;
            }
        }
    }
    else {
        if(id)
            return id;
        else
            return null;
    }
};
function _disablePage(){
    if(_$('disableLayer').length <= 0){
        var d;
        try{
            d = document.createElement("
"); } catch(e){ d = document.createElement("div"); d.id = "disableLayer"; d.style.position = "fixed"; d.style.height = "100%"; d.style.width = "100%"; d.style.backgroundColor = "#000"; d.style.opacity = 0.2; d.style.zIndex = 99; d.style.cursor = 'pointer'; } document.body.appendChild(d); } }; function _showPopUp(mode, urlhtml, divid, w, h, isModal, param){ _disablePage(); if(!isModal){ _$('disableLayer').onclick = (function(){ document.body.removeChild(_$('disableLayer')); document.body.removeChild(_$('popupContainer')); }); } var postop = 10; var posleft = ((screen.availWidth) - w)/2; var d; try{ d = document.createElement("
"); } catch(e){ d = document.createElement("div"); d.id = "popupContainer"; d.style.position = "fixed"; d.style.backgroundColor = "#fff"; d.style.top = postop + "px"; d.style.left = posleft + "px"; } document.body.appendChild(d); try{ d = document.createElement("
"); } catch(e){ d = document.createElement("div"); d.id = "popupPage"; d.style.position = "absolute"; d.style.height = h + "px"; d.style.width = w + "px"; d.style.backgroundColor = "#fff"; d.style.borderRadius = "5px"; d.style.padding = "10px"; d.style.boxShadow = "2px 5px 10px #333333"; d.style.opacity = 1; d.style.zIndex = "100"; } _$('popupContainer').appendChild(d); if(mode.toLowerCase() == "iframe"){ try{ d = document.createElement(""); } catch(e) { d = document.createElement("IFRAME"); d.id = divid; d.frameBorder = 0; d.frameSpacing = 0; d.style.height = (h - 5) + "px"; d.style.width = (w - 5) + "px"; d.style.zIndex = "100"; d.src = urlhtml; } _$('popupPage').appendChild(d); } else if(mode.toLowerCase() == "ajax"){ try{ d = document.createElement("
"); } catch(e) { d = document.createElement("div"); d.id = divid; d.style.height = (h - 1) + "px"; d.style.width = (w - 1) + "px"; d.style.zIndex = "100"; d.style.background="#D1C59D"; } _$('popupPage').appendChild(d); _waitGetData = function(){ _$(divid).innerHTML = "Please wait"; }; _responseGetData = function(str){ _$(divid).innerHTML = str; _$(divid).style.top = postop + "px"; _$(divid).style.left = posleft + "px"; }; var aj = new _ajax(urlhtml, "GET", param, function(){_waitGetData()}, function(r){_responseGetData(r)}); aj._query(); } else if(mode.toLowerCase() == "html"){ try{ d = document.createElement("
"); } catch(e) { d = document.createElement("div"); d.id = divid; d.style.height = (h - 5) + "px"; d.style.width = (w - 5) + "px"; d.style.zIndex = "100"; } _$('popupPage').appendChild(d); _$(divid).innerHTML = urlhtml; } };

Following is the technique for calling
_showPopUp("ajax", "test.php", "300", "200", false,""); you can set parameter as you wish, the test.php file is the popup content as you want to show in popup and you can set height and width as you wish. if this makes your task easier then please send your valuable comment to me. note: replace frame with iframe
thanks and regards
sukant
http://www.visit-in-india.com
www.facebook.com/sukant.rout
www.facebook.com/sukant.rout16

No comments:

Post a Comment