popUp без jQuery на чистом JavaScript+CSS

#javascript #css

У кого есть возможность кинуть ссылку на пример popUp окна без применения Framework-ов    

Ответы

Ответ 1

Класс самый простой для окна

function ModalWindow(fadeInBox, closeBtn, callback) {
var darkLayer = document.createElement('div');
darkLayer.id = 'fade';
document.body.appendChild(darkLayer);

function init() {
    fadeInBox.style.display = 'block';

    if(callback) callback();

    darkLayer.onclick = function() {
        removeDarkLoyer();
        fadeInBox.style.display = 'none';
        return false;
    }

    if (closeBtn) {
        closeBtn.onclick = function() {
            removeDarkLoyer();
            fadeInBox.style.display = 'none';
            return false;
        }
    }
}

function removeDarkLoyer() {
    darkLayer.parentNode.removeChild(darkLayer);
}

init();
}


CSS для подложки

#fade {
    position:fixed;
    width:100%;
    height:100%;
    z-index:100;
    background:#000;
    opacity: 0.7;
    left:0;
    top:0;
}


Ответ 2

Я сейчас создаю свой API: WebWinAPI (начал разрабатывать потом приостановил работу
учу PHP чтоб потом вообще cool сделать)
А вообще это легко если умеешь "общаться" с JavaScript, DOM и BOM