Перейти к публикации

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

LADYX

Автор: LADYX,
в В помощь вебмастеру

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

LADYX

LADYX 91

Опубликовано:
Опубликовано:

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

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

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

Ссылка на сообщение
Поделиться на других сайтах
MMysiv

MMysiv 30

Опубликовано:
Опубликовано: 


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) - последнее значение отвечает за затемнение.

Ссылка на сообщение
Поделиться на других сайтах
LADYX

LADYX 91

Опубликовано:
Опубликовано: Автор

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

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

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

Ссылка на сообщение
Поделиться на других сайтах
alex32

alex32 944

Опубликовано:
Опубликовано:

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

Ссылка на сообщение
Поделиться на других сайтах
LADYX

LADYX 91

Опубликовано:
Опубликовано: Автор

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

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

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

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

Ссылка на сообщение
Поделиться на других сайтах
LADYX

LADYX 91

Опубликовано:
Опубликовано: Автор

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

alex32 944

Опубликовано:
Опубликовано:

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

Ссылка на сообщение
Поделиться на других сайтах
LADYX

LADYX 91

Опубликовано:
Опубликовано: Автор

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

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

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

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

Ссылка на сообщение
Поделиться на других сайтах
alex32

alex32 944

Опубликовано:
Опубликовано:

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

Ссылка на сообщение
Поделиться на других сайтах
alex32

alex32 944

Опубликовано:
Опубликовано:

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

Ссылка на сообщение
Поделиться на других сайтах

Архивировано

Эта тема находится в архиве и закрыта для публикации сообщений.

Перейти к списку тем
×
×
  • Создать...