Javascript-форум - Открывающийся/закрывающийся div(popup)

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Открывающийся/закрывающийся div(popup) (https://javascript.ru/forum/jquery/60671-otkryvayushhijjsya-zakryvayushhijjsya-div-popup.html)

Открывающийся/закрывающийся div(popup)

Понимаю, что тема заезжана. Но не смог все ж найти/придумать решения(не костыльного на овер 100500 строк и проверок).

Надо создать, чтоб при нажатие на ссылку открывался див с инфой. Собственно, он у меня открывается/закрывается, по крестику тоже закрывается. Нужно, чтоб по клику в любом месте он тоже закрывался (частично реализованно), вот тут и возникает проблема: при клике в любом месте, кроме него самого, он закрывается. НО, если я кликаю по ссылке, которая его же и вызывает, то ничего не происходит.

Дабы не быть голословным, вот код:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <style>
        #disign{
            color: black;
            text-decoration: none
        }
        #content{
            color: blueviolet; display: none;
            border: 1px darkred solid; position:absolute;
            margin-left: 300px; margin-top: 0px;
            z-index: 1; background-color: white;
            width: 300px; height: 400px;
            overflow: auto;
        }
        #closing_crust{
            position: absolute;
            left: 270px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            var obj = document.getElementById('content');
            obj.style.display = 'none';
            $('#disign').click(function(){
                obj.style.display == 'none' ? $('#content').show() : $('#content').hide();
            });
            $('#closing_crust').click(function(){
                $('#content').hide();
            });
            $(document).mouseup(function (e){
                var div = $("#content");
                if (!div.is(e.target) && div.has(e.target).length === 0) {
                    div.hide();
                }
            });
        });
    </script>
</head>
<body>
<div class="dis">
    <div id="content">
        <img id="closing_crust" src="http://www.iconsearch.ru/uploads/icons/minimal/64x64/gtk-close.png" width="30" height="30">

    </div>
    <a id="disign" href="#" style="">Смотреть все дизайны для данного товара</a>
</div>
</body>
</html>

Что конфликт между 30 и 37 строчкой (эти две проверки накладываются и как бы перебивают друг друга) я понимаю. Но не знаю, как обойти это. Пробовал еще в 37 строку условие вставить

if (!div.is(e.target) && div.has(e.target).length === 0 && $('#disign').mouseleave())

, но не помогло.

Открывашка 246 открыть закрыть по ссылке по крестику и вне блока

Arx777,
вам через три дня было назначено, а вы через час пришли - непорядок однако :lol:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <style>
        #disign{
            color: black;
            text-decoration: none
        }
        #content{
            color: blueviolet; display: none;
            border: 1px darkred solid; position:absolute;
            margin-left: 300px; margin-top: 0px;
            z-index: 1; background-color: white;
            width: 300px; height: 400px;
            overflow: auto;
        }
        #closing_crust{
            position: absolute;
            left: 270px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
           var div = $("#content");
               $(document).on('click', function (event){
               if ($(event.target).closest(div).length  && !$(event.target).is('#closing_crust')) return;
               if ($(event.target).is('#disign')) div.toggle();
               else div.hide()
            });
        });
    </script>
</head>
<body>
<div class="dis">
    <div id="content">
        <img id="closing_crust" src="http://www.iconsearch.ru/uploads/icons/minimal/64x64/gtk-close.png" width="30" height="30">

    </div>
    <a id="disign" href="#" style="">Смотреть все дизайны для данного товара</a>
</div>
</body>
</html>

Товарищи, а как сделать тоже самое, но с версией jquery.min.js jQuery JavaScript Library v1.3.2 ?
Просто у меня на сайте в движке уже она подключена, и подключать ещё одну библиотеку не хотелось бы.

Цитата:

Сообщение от Oleg0

v1.3.2

выкинуть и никогда не пользоваться

Оно встроено в drupal 6, и на нём работают другие скрипты на сайте :(

Ну, тогда как добавить в Ваш вариант http://javascript.ru/forum/367958-post8.html закрытие при нажатии по крестику?
Не лучший, конечно, для меня вариант из-за того, что открываются блоки, идущие в коде по порядку, а не по id, но хотья бы так.
По форуму "открывашка" искал, везде либо подключение библиотек, либо не подходит.

Oleg0,
версия для 1.3.2

$(document).ready(function(){
           var div = $("#content");
               $(document).click(function (event){
               if ($(event.target).closest("#content").length  && !$(event.target).is('#closing_crust')) return;
               if ($(event.target).is('#disign')) div.toggle();
               else div.hide()
            });
        });

Красавчек! :victory: