Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выборка body по атрибуту (https://javascript.ru/forum/dom-window/38495-vyborka-body-po-atributu.html)

utb 04.06.2013 12:34

Выборка body по атрибуту
 
Приветствую,
у меня такая ситуация нужно добавить/убрать style="overflow:hidden;" для body, когда открывается модальное окно, либо класс по аналогии.

сделал так:
$(document).ready(function(){
   $('#modal').click(function(){
		$('body').addClass('Class');
   });
   $('.close').click(function(){
		$('body').removeClass('Class');
   });
});


Но модальное окно закрывается не только по кнопке .Close, но и по клику в любом месте.

модальное окно появляется с атрибутом style="display:block;" и aria-hidden="false" (bootstrap)
Я так понимаю, выборка по атрибуту и удаление класса?

Заранее спасибо.

Deff 04.06.2013 12:46

utb,
Повесьте снятие класса с body в функции скрытия модального Окна

danik.js 04.06.2013 13:15

http://twitter.github.io/bootstrap/j...pt.html#modals
смотри под заголовком Events. В кратце слушай событие hide

utb 04.06.2013 13:32

Deff,
спасибо :) все гениальное просто!

utb 04.06.2013 13:37

danik.js,
да, я сделал :)
только там Shown и Hidden
если кому надо:
$('#modal').on('shown', function () {
	$('body').addClass('Class');
	});
	$('#modal').on('hiden', function () {
	$('body').removeClass('Class');
	});


Только, не забудьте отключить keyboard :)

utb 05.06.2013 14:11

А вот как сделать чтобы прокрутка была, только прокручивался контент в модальном окне?

Deff 05.06.2013 14:20

<style type="text/css">
#modal {
  background:#D6E3F5;
  overflow-y:auto;
  overflow-x:hidden;
  width:120px;
  height:50px;
}
</style>


<div id=modal>
А вот как сделать чтобы прокрутка была, только прокручивался контент в модальном окне?
</div>

utb 05.06.2013 14:49

Deff,
наверное, не правильно объяснил. Видели во вконтакте личные сообщения прокручиваются как?
Модальное окно в центре всплывает - ок
А прокрутка браузера крутит в нем контент, а не прокрутка на самом модальном окне.

utb 05.06.2013 16:38

Придумал так:
При открытии модального окна убираем общий скрол со страницы.
Делаем оболочку для модального окна на всю ширину с фиксированной позицией и добавляем скрол.
и вуаля :)
вот если используете bootstrap:

$('#modal').on('shown', function () {
    $('body').addClass('Class');
    $('#modal-class').addClass('modal-class');
    });
    $('#modal').on('hidden', function () {
    $('body').removeClass('Class');
     $('#modal-class').removeClass('modal-class');
    });


Ну и css поколдовать и все ;)


Часовой пояс GMT +3, время: 13:39.