Форум

stem · #1 (**permalink**) 13.08.2015, 23:41

Здравствуйте!

Есть код

<script type="text/javascript">
window.onload= function() {
	document.getElementById('linkoneclickorder').onclick = function() {
		openbox('oneclickbox', this);
		return false;
	};
};
function openbox(id, linkoneclickorder) {
	var div = document.getElementById(id);
	if(div.style.display == 'block') {
		div.style.display = 'none';
	}
	else {
		div.style.display = 'block';
	}
}
</script>

<a id="linkoneclickorder" class="link-oneclicorder">Купить в 1 клик</a>
<div id="oneclickbox" style="display:none;" class="oneclickorder-productview-container">
<div class="oneclickorder-productview">
Тут код формы
</div>
</div>

Блок открывается при клике на ссылку, но его никак не закрыть по клику на ту же ссылку, т.к. блок расположен поверх всего контента.

Необходимо:
Либо, закрытие блока по клику на body и на oneclickbox, но при этом чтобы при клике на oneclickorder-productview блок не закрывался.
Либо кнопка закрыть в пределах блока oneclickbox.

Больше всего меня усраивает в этом коде, то, что он без jquery работает. Перепробовал кучу вариантов, ничего не работает, знаний js почти нет.

Decode · #2 (**permalink**) 14.08.2015, 01:30

stem, так?

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--<script src="http://code.jquery.com/jquery-latest.js"></script>-->
    <style>
        #oneclickbox {
            background: orange;
            padding: 50px;
            width: 30%;
        }
        .oneclickorder-productview {
            background: red;
        }
    </style>
<body>
    <a id="linkoneclickorder" class="link-oneclicorder" href="">Купить в 1 клик</a>

    <div id="oneclickbox" style="display:none;" class="oneclickorder-productview-container">
        <button>Закрыть</button>
        <div class="oneclickorder-productview">
            <form action="">
                <input type="text" /><br />
                <input type="text" /><br />
                <input type="submit" />
            </form>
        </div>
    </div>

    <script>
        var open = document.getElementById('linkoneclickorder'),
            close = document.querySelector('#oneclickbox > button'),
            oneclickbox = document.getElementById('oneclickbox');

        open.onclick = function() {
            !(oneclickbox.offsetHeight) && (oneclickbox.style.display = 'block');
            return false;
        };

        close.onclick = function() {
            oneclickbox.style.display = (oneclickbox.offsetHeight) ? 'none' : 'block';
        };
    </script>
</body>
</html>

stem · #3 (**permalink**) 15.08.2015, 20:55

Decode,
Почему-то при вставке на сайт уже не работает, там конфликт библиотек где то, поэтому не все варианты работают, даже fancybox пробовал ставить, не пашет и все.. ((

Decode · #4 (**permalink**) 15.08.2015, 21:43

stem, что консоль говорит?

Форум

Справочник

Discord чат

Курсы javascript