Затемнение экрана при открытии диалоговых и всплывающих окнах

LADYX · 1 сентября 2014

Всем здравствуйте!

Подскажите, пожалуйста, как сделать затемнение экрана при открытии базовых диалоговых и всплывающих окнах, таких как список всех голосований, профиля пользователя, вывода информации/ошибок и др.

Всем Спасибо за помощь!

MMysiv · 4 сентября 2014


HTML

<div class="popup">

	 <div class="popup_content">

		  Баба Маша любит пироги

	 </div>

</div>

CSS

.popup {min-height: 100%; width: 100%; overflow: hidden; position: fixed; top: 0px; background-color: rgba (0,0,0,0.75);

.popup .popup-content {width: 300px; height: 200px; padding: 20px; margin: 50px auto 0px auto; background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 10px #000;}

Это такой себе простой. Основные свойства - min-height, width, overflow, position и background-color rgba (0,0,0,0.75) - последнее значение отвечает за затемнение.

Изменено 4 сентября 2014 пользователем MMysiv

LADYX · 7 сентября 2014

MMysiv, да нет, это что-то не то.

Вот: http://forum.dle-news.ru/index.php?showtopic=59014&st=20 была тема, но это касалось, так сказать, сторонних окон. А здесь я так понимаю, необходимо вписать какую-то конкретную строчку в какой-то определенный файл скрипта, который отвечает за открытие всех "базовых" окон на сайте (все опросы, ошибки и прочее), чтобы автоматически при открытии всех всплывающих окон экран затемнялся.

Если я что-то не понимаю, пожалуйста, поправьте.

alex32 · 7 сентября 2014

http://dle-faq.ru/faq/jquery/115-zatemnenie-fona-pri-vsplytii-modalnogo-okna.html. Ну и по аналогии. То что dle_js мучать надо, это точно

LADYX · 8 сентября 2014

alex32, спасибо за подсказку, будем пытаться осуществить задуманное

LADYX · 15 сентября 2014

ура! все получилось!

alex32, ваша подсказка/наводка очень помогла. Все там оказывается довольно просто: добавить одну строчку в стилях и произвести однотипную замену в 13-и местах в файле /engine/classes/js/dle_js.js И все работает!

И появился еще один момент по модальным окнам. Как вы знаете, модальное окно можно двигать по экрану, плюс остается скроллинг страницы. Необходимо, чтобы страница полностью блокировалась до закрытия окна. Как можно это осуществить? Я так полагаю, необходимо внести какие-то изменения в стилях? Честно пытался, но как следствие - не результативно.

Прошу помощи!

MMysiv · 15 сентября 2014

position: fixed - для основного блока модального окна

Изменено 15 сентября 2014 пользователем MMysiv

alex32 · 15 сентября 2014

http://ruseller.com/lessons.php?rub=2&id=1556 смотрите пример

LADYX · 16 сентября 2014

http://ruseller.com/...p?rub=2&id=1556 смотрите пример

смотрел, читал, пытался применить стили. Но хоть ты тресни, весь мозг уже себе вынес ) не получается и все тут.

Стиль, который есть сейчас. Может быть, кто носом ткнет в нужное место


/*---Диалоговые и всплывающие окна jQuery UI---*/

.ui-helper-clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }

.ui-helper-clearfix { display: inline-block; }

* html .ui-helper-clearfix { height: 1%; }

.ui-helper-clearfix { display: block; }

.ui-icon { background-repeat: no-repeat; display: block; overflow: hidden; text-indent: -99999px; }

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button, .ui-widget { font-size: 11px; }

.ui-widget-content { background: #f1f1f1 50% bottom repeat-x; border: 1px solid #dedede; color: #222; }

.ui-widget-header {

background: #f1f1f1;

color: #333333;

font-weight: bold;

}

.ui-widget-header a { color: #333333; }

.ui-state-default, .ui-widget-content .ui-state-default {

background: #eaeaea url(../images/ui-bg_glass_85.png) 50% 50% repeat-x;

border: 1px solid #cfcfcf;

color: #868686;

font-weight: bold;

}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #2e6e9e; text-decoration: none; }

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {

background: #eaeaea url(../images/ui-bg_glass_75.png) 50% 50% repeat-x;

border: 1px solid #a7a7a7;

color: #4e4e4e;

font-weight: bold;

}

.ui-state-hover a, .ui-state-hover a:hover { color: #1d5987; text-decoration: none; }

.ui-state-active, .ui-widget-content .ui-state-active {

background: #d0e5f5 50% 50% repeat-x;

border: 1px solid #a7a7a7;

color: #e17009;

font-weight: bold;

}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #e17009; text-decoration: none; }

.ui-state-error {

background: #fef1ec 50% 50% repeat-x;

border: 1px solid #dedede;

color: #cd0a0a;

}

.ui-widget-header .ui-icon { background-image: url(../images/ui-icons.png); }

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-image: url(../images/ui-icons_h.png); }

.ui-icon-close {}

.ui-icon-closethick {}

.ui-button .ui-button-text { display: block; line-height: 1.4em; }

.ui-button-text-only .ui-button-text { padding: .4em .8em; }

input.ui-button { padding: .4em 1em; }

.ui-button-set { margin-right: 7px; }

.ui-button-set .ui-button { margin-left: 0; margin-right: -.3em; }

button.ui-button::-moz-focus-inner { border: 0; padding: 0; }

.ui-dialog {

padding: .2em;

position: absolute;

width: 300px;

box-shadow: 0 0 0 6px rgba(153, 153, 153, .3);

-moz-box-shadow: 0 0 0 6px rgba(153, 153, 153, .3);

-webkit-box-shadow: 0 0 0 6px rgba(153, 153, 153, .3);

border-radius: 6px;

max-width: 90%;

}

.ui-dialog .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative; }

.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0; font-size: 20px; color: #333333; font-weight: normal; font-weight: 400;  padding: 10px 0px 10px 0px; }

.ui-dialog .ui-dialog-titlebar-close {

overflow: visible;

position: absolute;

right: -26px;

top: -26px;

background:url('../images/close.png') 0 0 no-repeat;

width: 36px;

height: 36px;

border: 0;

}

.ui-dialog-titlebar-close:hover {background-position: 0 -36px; border: 0;}

.ui-dialog .ui-dialog-titlebar-close span { display: block; background: none; }

.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }

.ui-dialog .ui-dialog-content {

background: none;

border: 0;

overflow: hidden;

padding: .5em 1em;

position: relative;

zoom: 1;

font-weight: normal;

font-size: 13px;

color: #666666;

font-family: Georgia, Verdana, 'Times New Roman', Arial, serif;

}

.ui-dialog .ui-dialog-content fieldset {border:none!important; padding: 0; margin: 20px 20px 50px 0px;}

.ui-dialog .ui-dialog-content legend {font-weight: bold;  padding-bottom: 20px;}

.ui-dialog .ui-dialog-buttonpane {

background-image: none;

border-width: 1px 0 0 0;

margin: .5em 0 0 0;

padding: .3em 1em .5em .4em;

text-align: left;

}

.ui-dialog .ui-dialog-buttonpane button {

cursor: pointer;

float: right;

line-height: 1.4em;

margin: .5em .4em .5em 0;

overflow: visible;

padding: .2em .6em .3em .6em;

width: auto;

}

.ui-dialog .ui-resizable-se { bottom: 3px; height: 14px; right: 3px; width: 14px; }

.ui-draggable .ui-dialog-titlebar { cursor: pointer; }

.ui-widget-overlay { background: #000; opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80); position: fixed; top: 0; right: 0; bottom: 0; left: 0; }

Откопал еще одну информацию:

draggable – по умолчанию установлено значение true, что дает возможность перемещения диалогового окна. Если установить значение false, перемещение станет невозможным.

и

modal – если установить значение true для этой опции, диалог станет модальным. Т.е. другие элементы на веб-странице будут заблокированы, и пользователь не сможет с ними взаимодействовать. Это будет достигнуто с помощью создания дополнительного слоя, находящегося ниже диалога, но выше остальных элементов веб-страницы.

Может быть, дело то и не только в стилях, а также необходимо кроме этого и править файл /engine/classes/js/dle_js.js?

alex32 · 16 сентября 2014

я не знаю точно, какой класс отвечает за затемнение, но вот на тот блок, который закрывает все body темным фоном и надо добавить в стили pointer-events: none;

LADYX · 16 сентября 2014

класс отвечает за затемнение, но вот на тот блок, который закрывает все body темным фоном

последняя строчка - .ui-widget-overlay

В исходном/представленном стиле доступен скроллинг и возможность перетаскивать окно.

При добавлении pointer-events: none; в .ui-widget-overlay ничего не меняется, кроме этого становится еще и доступным контент, т.е. несмотря на открытое окно, можно кликать на ссылки и прочее.

alex32 · 16 сентября 2014

ага, тогда проще, смотрите, какой блок выше стоит, и на него цепляйте. если есть возможность, киньте в личку урл с примером

LADYX · 16 сентября 2014

понятно, будем пробовать

ссылку отправил в лс

alex32 · 16 сентября 2014

отписал в лс. Все норм, а то что выделяется контент, так его все равно скопировать нельзя, попробуйте правой кнопкой мышки щелкнуть, у меня пункта "скопировать" не появилось. А если кто хитропоппый будет, так его эти все извраты не остановят

Затемнение экрана при открытии диалоговых и всплывающих окнах

Рекомендованные сообщения

LADYX 90

Ссылка на сообщение

Поделиться на других сайтах

MMysiv 30

Ссылка на сообщение

Поделиться на других сайтах

LADYX 90

Ссылка на сообщение

Поделиться на других сайтах

alex32 942

Ссылка на сообщение

Поделиться на других сайтах

LADYX 90

Ссылка на сообщение

Поделиться на других сайтах

LADYX 90

Ссылка на сообщение

Поделиться на других сайтах

MMysiv 30

Ссылка на сообщение

Поделиться на других сайтах

alex32 942

Ссылка на сообщение

Поделиться на других сайтах

LADYX 90

Ссылка на сообщение

Поделиться на других сайтах

alex32 942

Ссылка на сообщение

Поделиться на других сайтах

LADYX 90

Ссылка на сообщение

Поделиться на других сайтах

alex32 942

Ссылка на сообщение

Поделиться на других сайтах

LADYX 90

Ссылка на сообщение

Поделиться на других сайтах

alex32 942

Ссылка на сообщение

Поделиться на других сайтах

Присоединяйтесь к обсуждению