Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.01.2016, 16:15
Интересующийся
Отправить личное сообщение для Arx777 Посмотреть профиль Найти все сообщения от Arx777
 
Регистрация: 20.02.2015
Сообщений: 25

Открывающийся/закрывающийся 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())
, но не помогло.
Ответить с цитированием
  #2 (permalink)  
Старый 13.01.2016, 17:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Открывашка 246 открыть закрыть по ссылке по крестику и вне блока
Arx777,
вам через три дня было назначено, а вы через час пришли - непорядок однако
<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 07.04.2016, 11:15
Интересующийся
Отправить личное сообщение для Oleg0 Посмотреть профиль Найти все сообщения от Oleg0
 
Регистрация: 07.04.2016
Сообщений: 28

Товарищи, а как сделать тоже самое, но с версией jquery.min.js jQuery JavaScript Library v1.3.2 ?
Просто у меня на сайте в движке уже она подключена, и подключать ещё одну библиотеку не хотелось бы.
Ответить с цитированием
  #4 (permalink)  
Старый 07.04.2016, 11:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от Oleg0
v1.3.2
выкинуть и никогда не пользоваться
Ответить с цитированием
  #5 (permalink)  
Старый 07.04.2016, 11:49
Интересующийся
Отправить личное сообщение для Oleg0 Посмотреть профиль Найти все сообщения от Oleg0
 
Регистрация: 07.04.2016
Сообщений: 28

Оно встроено в drupal 6, и на нём работают другие скрипты на сайте
Ответить с цитированием
  #6 (permalink)  
Старый 07.04.2016, 11:55
Интересующийся
Отправить личное сообщение для Oleg0 Посмотреть профиль Найти все сообщения от Oleg0
 
Регистрация: 07.04.2016
Сообщений: 28

Ну, тогда как добавить в Ваш вариант изменение display блока по клику закрытие при нажатии по крестику?
Не лучший, конечно, для меня вариант из-за того, что открываются блоки, идущие в коде по порядку, а не по id, но хотья бы так.
По форуму "открывашка" искал, везде либо подключение библиотек, либо не подходит.
Ответить с цитированием
  #7 (permalink)  
Старый 07.04.2016, 12:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

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()
            });
        });
Ответить с цитированием
  #8 (permalink)  
Старый 07.04.2016, 12:32
Интересующийся
Отправить личное сообщение для Oleg0 Посмотреть профиль Найти все сообщения от Oleg0
 
Регистрация: 07.04.2016
Сообщений: 28

Красавчек!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск