Форум

maximamus · #1 (**permalink**) 10.08.2015, 12:03

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

<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>

Как можно сделать, что бы кнопка закрытия блока действовала в любом месте окна браузера, а не только по нажатию на "Х"?

Deff · #2 (**permalink**) 10.08.2015, 12:18

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

maximamus · #3 (**permalink**) 11.08.2015, 12:42

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

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

честно, половину лишь понял из написаного) можно поподробнее?

javaQest · #4 (**permalink**) 11.08.2015, 13:17

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

<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

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>

Deff · #6 (**permalink**) 11.08.2015, 14:20

рони,
Ну для полного счастья обернуть всё в анонимную функцию
(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>

maximamus · #7 (**permalink**) 21.08.2015, 11:01

а если этих блоков пара штук, как функцию правильно написать?
у меня каждый новый блок с разным названием id, цифра в конце меняется - divwin4,.. 3,... 2 ну и так далее

рони · #8 (**permalink**) 21.08.2015, 11:14

maximamus,
поиск по форуму: открывашка
выберите из более 200 вариантов более вам подходящий

maximamus · #9 (**permalink**) 21.08.2015, 11:56

перебрал пару страниц, ничего и близко не схоже с тем что хочу сделать
помогите доделать этот кусок(

рони · #10 (**permalink**) 21.08.2015, 13:32

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="https://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>

Форум

Справочник

Discord чат

Курсы javascript