Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.08.2015, 12:03
Аспирант
Отправить личное сообщение для maximamus Посмотреть профиль Найти все сообщения от maximamus
 
Регистрация: 29.01.2015
Сообщений: 81

Закрытие блока по нажатию в любом месте
Приветствую! Не подскажете как новичку решить проблему?
Есть блок:

<div id="btopen">  
      <a onclick="document.getElementById('divwin4').style.display='block'"></a>
</div>
                
                
     <div id="divwin4">
           <div id="closeButton" onclick="document.getElementById('divwin4').style.display='none'">Х</div>
                Текст который открывается             
     </div>



Как можно сделать, что бы кнопка закрытия блока действовала в любом месте окна браузера, а не только по нажатию на "Х"?
Ответить с цитированием
  #2 (permalink)  
Старый 10.08.2015, 12:18
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Типично div#btopen обертывают во wraper с абсолютной или фиксированной позицией и шириной-высотой в экран(затемненным или прозрачным фоном) любой клик мимо модального окна приходится по нему, ну или отслеживать любой клик на боди, при одновременном отсутствии клика на #btopen

Последний раз редактировалось Deff, 10.08.2015 в 12:21.
Ответить с цитированием
  #3 (permalink)  
Старый 11.08.2015, 12:42
Аспирант
Отправить личное сообщение для maximamus Посмотреть профиль Найти все сообщения от maximamus
 
Регистрация: 29.01.2015
Сообщений: 81

Сообщение от Deff Посмотреть сообщение
Типично div#btopen обертывают во wraper с абсолютной или фиксированной позицией и шириной-высотой в экран(затемненным или прозрачным фоном) любой клик мимо модального окна приходится по нему, ну или отслеживать любой клик на боди, при одновременном отсутствии клика на #btopen
честно, половину лишь понял из написаного) можно поподробнее?
Ответить с цитированием
  #4 (permalink)  
Старый 11.08.2015, 13:17
Профессор
Посмотреть профиль Найти все сообщения от javaQest
 
Регистрация: 07.08.2015
Сообщений: 154

Что значит "кнопка действовала"? Ты можешь по клику закрыть.
<html>


<head>
</style>
</head>
<body>

<div id="d">foo</div>

<script>

document.body.onclick=function(){
 d.style.display="none"
}


</script>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 11.08.2015, 14:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Закрытие блока по клику вне блока или по кнопке закрыть
maximamus,
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #divwin4 {
            background-color: #008000;
            width: 150px;
            height: 150px;
            display: none;
        }

        #closeButton {
            background-color: #FF0000;
        }
    </style>

</head>

<body>
    <div id="btopen">
        <a>open</a>
    </div>


    <div id="divwin4">
        <div id="closeButton" onclick="">close</div>
        Текст который открывается можно кликать
    </div>
    <script type="text/javascript">
        var doc = document,
            div = doc.getElementById("divwin4");
        doc.onclick = function(a) {
            for (a = a.target; a != doc;) {
                if ("closeButton" == a.id) {
                    div.style.display = "none";
                    return
                }
                if ("btopen" == a.id) {
                    div.style.display = "block";
                    return
                }
                if ("divwin4" == a.id) return;
                a = a.parentNode
            }
            div.style.display = "none"
        };
    </script>

</body>

</html>

Последний раз редактировалось рони, 11.08.2015 в 14:04.
Ответить с цитированием
  #6 (permalink)  
Старый 11.08.2015, 14:20
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

рони,
Ну для полного счастья обернуть всё в анонимную функцию
(function() { ... }());
=============
Иначе есть древний велосипед, чтимый начинающими:
<!DOCTYPE>
<html>
<head>
<style>
#closeButton,
a {
  cursor:pointer;
}
#closeButton{
 display:inline-block;
 float:right;
 margin-right:12px;
 margin-top:-12px;
}
#divwin4 {
  padding:12px;
 border:red solid 1px;
 border-radius:12px;
}
</style>
<script>
window.onload=function(){
  document.body.onclick=function(){
     if(µ) {µ =false; return;}
     document.getElementById('divwin4').style.display="none"
  }
}
</script>
</head>
<body style="min-height:400px">



<div id="btopen">  
      <a onclick="document.getElementById('divwin4').style.display='block';µ=true">Открыть</a>
</div>
                
                
     <div id="divwin4" style="display:none" onclick="µ=true">
           <span id="closeButton" onclick="document.getElementById('divwin4').style.display='none';µ=true;">Х</span>
                Текст который открывается             
     </div>




</body>
</html>

Последний раз редактировалось Deff, 11.08.2015 в 14:34.
Ответить с цитированием
  #7 (permalink)  
Старый 21.08.2015, 11:01
Аспирант
Отправить личное сообщение для maximamus Посмотреть профиль Найти все сообщения от maximamus
 
Регистрация: 29.01.2015
Сообщений: 81

а если этих блоков пара штук, как функцию правильно написать?
у меня каждый новый блок с разным названием id, цифра в конце меняется - divwin4,.. 3,... 2 ну и так далее
Ответить с цитированием
  #8 (permalink)  
Старый 21.08.2015, 11:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

maximamus,
поиск по форуму: открывашка
выберите из более 200 вариантов более вам подходящий
Ответить с цитированием
  #9 (permalink)  
Старый 21.08.2015, 11:56
Аспирант
Отправить личное сообщение для maximamus Посмотреть профиль Найти все сообщения от maximamus
 
Регистрация: 29.01.2015
Сообщений: 81

перебрал пару страниц, ничего и близко не схоже с тем что хочу сделать
помогите доделать этот кусок(
Ответить с цитированием
  #10 (permalink)  
Старый 21.08.2015, 13:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

maximamus,
Открывашка 204 + закрытие по клику вне блока или кнопок чем не оно
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .active-menu-item{background: #FFE4B5;}
    div.menu-mega{display:none; width:600px;height:200px;}
	div.menu-main-item{display:block; width:200px; height:100px;  border:1px solid #333;}
    #menu-restoran{background-color: green}
	#menu-trade{background-color: pink}
	#menu-equipment{background-color: blue}
 .closeButton{
 display:inline-block;
 float:right;
 margin-right:12px;
 margin-top:12px;
 cursor: pointer;
  background-color: #FFFF00;
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
    $(function() {
    var $but = $(".menu-main-item"),
        $blocks = $(".menu-mega");
    $but.each(function(i, elem) {
        var $el = $(elem);
        $el.click(function() {
            $but.not($el).removeClass("active-menu-item");
            $el.toggleClass("active-menu-item");
            $blocks.filter(function(j, el) {
                i == j && $(el).slideToggle();
                return i != j
            }).slideUp();
        })
    });
    $('html').click(function (event) {
          if ($(event.target).closest('.menu-main-item, .menu-mega' ).size() && !$(event.target).is('.closeButton')) return;

          $but.filter('.active-menu-item').click()
      });
});
  </script>
</head>

<body>
    <!--использую navbar bootstrap -->
<ul class="menu-main-nav">
<li><a class="menu-main-item" href="#" data-item="menu-restoran">Для ресторанов<i class="main-choise"></i></a></li>
<li><a class="menu-main-item" href="#" data-item="menu-trade">Для торговли<i class="main-choise"></i></a></li>
<li><a class="menu-main-item" href="#" data-item="menu-equipment">Торговое оборудование<i class="main-choise"></i></a></li>
</ul>
<!--Блок выпадающего мегаменю</i> -->
<div class="menu-mega" id="menu-restoran"> <span class="closeButton" >Х</span>
	    test 1
</div>
<!-- тут дальше еще три блока  -->
<div class="menu-mega" id="menu-trade">  <span class="closeButton" >Х</span>
	    test 2
</div>
<div class="menu-mega" id="menu-equipment"> <span class="closeButton" >Х</span>
	    test 3
</div>
</body>

</html>

Последний раз редактировалось рони, 27.08.2015 в 20:41.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Canvas текст в любом месте. levshkatov Общие вопросы Javascript 10 03.09.2014 21:15
Сворачивание блока при клике в любом месте страницы onuvidelsolnce Элементы интерфейса 6 15.04.2013 13:35
Принудительное завершение скрипта в любом месте. Maxfashko Общие вопросы Javascript 4 22.12.2012 14:13
Помогите отловить собыие клика на любом участке сайта кроме заданного блока Emil jQuery 2 10.11.2012 17:40
При клике в любом месте документа должен удаляться определенный id DorianLeroy jQuery 2 24.12.2011 22:05