Закрытие блока по нажатию в любом месте
Приветствую! Не подскажете как новичку решить проблему?
Есть блок:
<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="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>
|
в очередной раз спасибо огромное!
|
Цитата:
И есть еще один вопрос У меня сделано так, что при нажатии в любом месте браузера открывающиеся блок был по центру, так вот, когда закрываешь блок и немного проскролил, оно опять центрирует. Как можно отменить цетровку при закрытии блока? |
Цитата:
|
<!--якорь, куда центрирует</i> -->
<a id="section50" class="in-page-link"></a>
<ul class="menu-main-nav">
<!--ссылка с переходом в якорь - #section50 </i> -->
<li><a class="menu-main-item inner-link col-sm-4 text-center feature futr" href="#section50" data-item="object">
<img src="/images/atrak.png">
<h5 class="header-upper">Тематичні об’єкти</h5>
<i class="main-choise"></i></a>
</li>
</ul>
|
Цитата:
|
maximamus,
всё одно не понимаю |
Цитата:
|
maximamus,
http://plnkr.co/edit/?p=preview макет живой нужен и/или картинка - без вашего html css js гадать только |
Цитата:
http://plnkr.co/edit/yUzuaIYcG4UhyGXJmQyZ?p=preview попробовал сделать, вроде и все что нужно загрузил, пробовал уже загрузить все скрипты, что используются на сайте, но что то не скролит в нужное место и понять не могу в чем дело test - вот выгрузил готовый тест, может тут будет понятней - раздел - Ми знаємо куди застосувати архітектурний бетон в: |
maximamus,
открыл блок - произошло центрование - закрыл блок - немного проскролил - ничего ни куда не центрует. |
Цитата:
|
maximamus,
заменить
$but.filter('.active-menu-item').click()
на
$but.removeClass("active-menu-item");
$blocks.slideUp();
|
Цитата:
и опять БОЛЬШУЩЕЕ спасибо! |
Вложений: 1
рони,
эта открывашка №204 работает замечательно) Только у меня сайт на битриксе, и на странице есть встроенный компонент и в нем используется jquery-ui/Accordion, и он тогда работает не корректно(скриншот во вложении). Это какой-то конфликт? И там уже спрашивал в другой открывашке, как прокручивать к открывшемуся div, но ту поставить не получилось. Как на этой реализовать такое? |
d1mka21,
по фото не умею :) |
рони,
блин, а как бы Вам так объяснить:blink: Просто там эти компоненты, их тут не выложишь( Вот ссылка http://noviyhudozhnik.ru/personal/, только тут надо будет тогда зарегится( А вывести без регистрации, не получиться, компонент блокирует( |
d1mka21,
не могу помочь |
рони,
ок, подскажите тогда, пожалуйста, что нужно в этой открывашке подправить, что бы был скролинг к открывшемся div? А завтра повытягиваю весь код и тут примером выложу) |
d1mka21,
я написал вам код, вы его смотрели? ... больше мне добавить нечего http://javascript.ru/forum/misc/2599...tml#post411815 |
рони,
конечно смотрел просто там было к другой открывашке, а как эту дополнить? |
d1mka21,
какую эту ? проще написать ещё :) пишите лаконично html и css и описание |
рони, я воспользовался Вашей открывашкой, только поменял классы
$(function() {
var $but = $(".profile_link"),
$blocks = $(".profile-block");
$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('.profile_link, .profile-block' ).size() && !$(event.target).is('.closeButton')) return;
$but.filter('.active-menu-item').click()
});
});
где .profile_link - это класс ссылки .profile-block - это класс блока который открывается и скрывается; Что бы сделать, прокрутку к открывшемуся блоку, попробовал добавить:
$(".profile_block").scrolTo()
после }).slideUp(); но не сработало( Куда правильнее вставить? И еще такой вопрос, с этой открывашкой при клике на ссылку передается в адресную строчку "#", это никак не повлияет потом на отправку формы? В том что используется в href="#", ничего страшного нет? И сейчас получается, если кликать на ссылку, но страница подпрыгивает вверх, это из-за href="#", как понял, это как-то убрать можно?!) И у меня на битриксе есть код стандартный, может его лучше доделать, что бы была прокрутка к выпавшему блоку и мог открываться только один? Вот тут примерная верстка с битрикса html/css: https://jsfiddle.net/d1mka21/ecesw2mn/ Сам скрипт, тут https://jsfiddle.net/d1mka21/2y3xpreo/ |
d1mka21, вариант
$(function() {
var $but = $(".profile_link"),
$blocks = $(".profile-block");
$but.each(function(i, elem) {
var $el = $(elem);
$el.click(function(event) {
event.preventDefault();
$but.not($el).removeClass("active-menu-item");
$el.toggleClass("active-menu-item");
$blocks.filter(function(j, el) {
if(i == j) {var vis = $(el).slideToggle().is(":visible");vis && $(el).scrolTo()} ;
return i != j
}).slideUp();
})
});
$('html').click(function (event) {
if ($(event.target).closest('.profile_link, .profile-block' ).size() && !$(event.target).is('.closeButton')) return;
$but.filter('.active-menu-item').click()
});
});
|
Вложений: 1
рони,
при таком варианте, у меня они все открываются и все закрываются, то есть если один открыт то второй когда открывается первый не закрывается( и не прокручивается( И при клике на ссылку в консоле появляются ошибки( |
d1mka21,
пас |
рони,
ладно, спасибо большое) Буде чет искать) |
| Часовой пояс GMT +3, время: 10:44. |