dom 5

by ebaloSnositelXX

HTML

<body>
<div class="container">
    <form>
        <input type="email"
               class="focus-sit"
               data-popup="Этот адрес будет использоваться...."
               data-popup-side="left">
        <button type="button"
                class="click-sit"
                data-popup-id="template-login-popup"
                data-popup-side="above">войти на сайт</button>
    </form>
</div>

<script type="text/x-template" id="template-login-popup">
    <form>
        <table>
            <tr>
                <td>Email</td>
                <td>
                    <input type="email">
                </td>
            </tr>
            <tr>
                <td>Пароль</td>
                <td>
                    <input type="password">
                </td>
            </tr>
            <tr>
                <td colspan="2" class="outer-submit">
                    <input type="submit" value="Войти">
                </td>
            </tr>
        </table>
    </form>
</script>
</body>

CSS

body {
            height: 2000px;
        }
        .popup {
            background-color: white;
            z-index: 10;
            border: 1px solid black;
            padding: 5px 5px 5px 55px;
        }
        .popup form {
            height: 120px;
            width: 300px;
        }
        .container, .popup {
            position: absolute;
        }
        .container {
            top: 500px;
            left: 300px;
        }
        button.click-sit {
            margin-top: 50px;
            display: block;
        }
        .outer-submit {
            text-align: right;
        }
        .outer-submit input[type="submit"] {
            background-color: #F8C0D5;
        }

JavaScript

function createElem(type, classList, template, neighbor) {
        var elem = document.createElement(type);
        for (var i = 0; i < classList.length; i++) {
            var className = classList[i];
            elem.classList.add(className);
        }
        elem.innerHTML = template;
        var parent     = neighbor.parentNode;
        parent.insertBefore(elem, neighbor);
        return elem;
    }

    function positioningPopup(elem, popup) {
        var elemCords = elem.getBoundingClientRect();
        console.log(elemCords.top, popup.offsetHeight, document.body.scrollTop);
        switch(elem.dataset.popupSide) {
            case "above":
                popup.style.top  = elemCords.top - popup.offsetHeight +
                    document.body.scrollTop + "px";
                popup.style.left = elemCords.left + elem.offsetWidth / 2 -
                    popup.offsetWidth / 2 + document.body.scrollLeft + "px";
                break;
            case "right":
                popup.style.top  = elemCords.top + elem.offsetHeight / 2 -
                    popup.offsetHeight / 2 + document.body.scrollTop + "px";
                popup.style.left = elemCords.right +
                    document.body.scrollLeft + "px";
                break;
            case "below":
                popup.style.top  = elemCords.bottom +
                    document.body.scrollTop + "px";
                popup.style.left = elemCords.left + elem.offsetWidth / 2 +
                    document.body.scrollLeft - popup.offsetWidth / 2 + "px";
                break;
            case "left":
                popup.style.top  = elemCords.top + elem.offsetHeight / 2 +
                    document.body.scrollTop - popup.offsetHeight / 2 + "px";
                popup.style.left = elemCords.left + document.body.scrollLeft -
                    popup.offsetWidth + "px";
                break;

            default: throw new Error("Неизвестный тип.");
        }
    }

    function...