|
Закрытие блока по нажатию в любом месте
Приветствую! Не подскажете как новичку решить проблему?
Есть блок:
<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>
Как можно сделать, что бы кнопка закрытия блока действовала в любом месте окна браузера, а не только по нажатию на "Х"? |
Типично div#btopen обертывают во wraper с абсолютной или фиксированной позицией и шириной-высотой в экран(затемненным или прозрачным фоном) любой клик мимо модального окна приходится по нему, ну или отслеживать любой клик на боди, при одновременном отсутствии клика на #btopen
|
Цитата:
|
Что значит "кнопка действовала"? Ты можешь по клику закрыть.
<html>
<head>
</style>
</head>
<body>
<div id="d">foo</div>
<script>
document.body.onclick=function(){
d.style.display="none"
}
</script>
</body>
</html>
|
Закрытие блока по клику вне блока или по кнопке закрыть
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>
|
рони,
Ну для полного счастья обернуть всё в анонимную функцию (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>
|
а если этих блоков пара штук, как функцию правильно написать?
у меня каждый новый блок с разным названием id, цифра в конце меняется - divwin4,.. 3,... 2 ну и так далее |
maximamus,
поиск по форуму: открывашка выберите из более 200 вариантов более вам подходящий |
перебрал пару страниц, ничего и близко не схоже с тем что хочу сделать
помогите доделать этот кусок( |
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>
|
| Часовой пояс GMT +3, время: 14:41. |
|