Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Затемнение при открытии модального окна

Затемнение при открытии модального окна

     16.07.2012    Все вопросы » Стили (CSS)    10006

вопрос
Есть код подскажите пожалуйста как сделать затемнение. Варианты которые здесь размещены не подходят.

function showOkno() {
$(function(){

$('#oknouroka').dialog({
autoOpen: true,
show: 'slide',
hide: 'slide',
width: 550,
buttons: {
"Закрыть окно" : function() {
$(this).dialog("close");
}
}
});
});
}



ССЫЛКА

Спасибо всем кто ответит

Ответил: nowheremany

Варианты которые здесь размещены не подходят

А других нет

14 комментариев

kovalenko3331
Юзер

kovalenko3331 - 16 июля 2012 18:15 -

Добавь modal: true, и в css добавь .ui-widget-overlay{background:#000;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);left:0;position:fixed;top:0;}
wcw2007
Юзер

wcw2007 - 16 июля 2012 20:39 -

Извиняюсь а куда именно добавить modal:true

Спасибо
kovalenko3331
Юзер

kovalenko3331 - 16 июля 2012 20:49 - 

function showOkno() {
$(function(){

$('#oknouroka').dialog({
autoOpen: true,
modal: true,
show: 'slide',
hide: 'slide',
width: 550,
buttons: {
"Закрыть окно" : function() {
$(this).dialog("close");
}
}
});
});
}

вот так должно быть
wcw2007
Юзер

wcw2007 - 16 июля 2012 21:05 -

Добавил modal но перестало работать просто при клике поднимается на верх сайта в css в самом винизу прописал. Что не правильно???

$('#oknouroka1').dialog({
autoOpen: true,
modal: true,
show: 'slide',
hide: 'slide',
width: 550,
buttons: {
"Закрыть окно" : function() {
$(this).dialog("close");
kovalenko3331
Юзер

kovalenko3331 - 16 июля 2012 22:12 -

просто добавьте в Ваш скрипт после строки autoOpen: true, строку modal: true, все должно работать. Я вам просто написал готовое решение исходя из Вашего скрипта, в Вашем последнем комментарии вы привели не полный скрипт (не хватает 13-17 строки) и если Вы именно его вставляли в новость то оно и не будет работать.
SX2
Эксперт

SX2 - 17 октября 2012 21:59 -

А как премениить стиль
.ui-widget-overlay{background:#000;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);left:0;position:fixed;top:0;}

конкретно к окну к примеру есть два окна одному 
.ui-widget-overlay{background:#000;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);left:0;position:fixed;top:0;}
а второму 
.ui-widget-overlay{background:#FFF;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);left:0;position:fixed;top:0;}
Самая сложная часть работы – решиться приступить к ней.
ПафНутиЙ
Админ

ПафНутиЙ - 17 октября 2012 22:29 -

у окна есть ID, от него и можно плясать
#id1 .ui-widget-overlay{background:#000;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);left:0;position:fixed;top:0;}

#id2 .ui-widget-overlay{background:#FFF;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);left:0;position:fixed;top:0;}

ну или убрать пробел после ID если этот id прописан к тому же блоку, что и классы.
Каков вопрос - таков и ответ. Просто помните об этом.
SX2
Эксперт

SX2 - 17 октября 2012 22:51 -

Чето не получается вот так сейчас выводит
echo  '<script type="text/javascript">
function options_id_us() {
$(function(){
$(\'#options_id_us\').dialog({
autoOpen: true,
modal: true,
show: \'fade\',
hide: \'fade\',
width: 260,
height: 180,
});
});
}
</script>';
echo '<div id="options_id_us" title="Список ID пользователей" style="display:none;" align="left">';
echo $user_id;
echo  '</div>';

грузит стили с engine/skins/jquery-ui.css
Самая сложная часть работы – решиться приступить к ней.
ПафНутиЙ
Админ

ПафНутиЙ - 17 октября 2012 22:56 -

адрес сайта есть?
Но вообще мне эти модальные окна не равятся - геморойный у них вызов. и геморойная кастомизация.
буду не оригинален но всё же они гораздо проще в установке и использовании.
Каков вопрос - таков и ответ. Просто помните об этом.
SX2
Эксперт

SX2 - 17 октября 2012 23:09 -

ПафНутиЙ,
Это в адмиике в модуле выводится пока на локалке делаю
Самая сложная часть работы – решиться приступить к ней.
SX2
Эксперт

SX2 - 17 октября 2012 23:32 -

Решение найдено ! Добавил в каждое окно свой стиль таким методом:
<style type="text/css" media="all">
.ui-widget-overlay{background:#000;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);left:0;position:fixed;top:0;}
</style>
Самая сложная часть работы – решиться приступить к ней.
SX2
Эксперт

SX2 - 18 октября 2012 00:01 -

А какие есть вообще эффекты кроме slide и fade ?
Самая сложная часть работы – решиться приступить к ней.
ПафНутиЙ
Админ

ПафНутиЙ - 18 октября 2012 00:12 -

если не ошибаюсь - све, которые есть в jquery.easing
Каков вопрос - таков и ответ. Просто помните об этом.
Sander
PHP-developer

Sander - 18 октября 2012 12:39 - 

.animate({width:'toggle'},{duration:500, effect:easing});

вроде как-то так..
Остальное по аналогии.
SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 30.06.2012 faqbill  Стили (CSS)
 28.10.2012 Morse  Общие вопросы, Стили (CSS)
 15.05.2013 lsdoptom  Стили (CSS), jQuery
 06.09.2013 249893  Шаблоны (TPL), Стили (CSS)
 04.12.2013 xeon01  Стили (CSS), jQuery
 14.03.2014 alexcreew  Шаблоны (TPL), Стили (CSS)
 02.05.2014 psih  Общие вопросы по вёрстке, Стили (CSS)
 04.05.2014 enterlive  Стили (CSS), jQuery, Общие вопросы по PHP, Хаки
 31.05.2014 tidzh  Стили (CSS), jQuery
 18.07.2014 249893  Шаблоны (TPL), Стили (CSS)
  • non-stop | Как решить проблему индексации DLE в пои ... 1
    Фото non-stop
    non-stop
    Как решить проблему индексации DLE в поиске Bing?
    19-12-2024, 17:02
    Забыл написать что обновился до последней версии 17.3
    Интересно узнать, это только у меня проблема, или это проблема движка? проверьте свои сайты на наличие в поиске Bing.
    В 11 винде именно эта поисковая система стоит по умолчанию . кроме того эта же поисковая система отвечает за индекс еще одного поисковика - yahoo. Эти системы могут давать дополнительный процент пискового трафика на сайты.
  • lutskboy | Как максимально грамотно организовать до ... 1
    Фото lutskboy
    lutskboy
    Как максимально грамотно организовать добавление материалов через SQL-запросы?
    18-12-2024, 21:39
    все верно. related_ids автоматом заполняется потом.
  • derebas | Убираем xfsearch из адресной строки 7
    Фото derebas
    derebas
    Убираем xfsearch из адресной строки
    16-12-2024, 02:35
    в правилах транслитерации для tagvalue поставьте замену " " => "-", например так
    str_replace(array('.', ' ', '/', '&', "'", '+', '«', '»', ':', '!'), array('', '-', '-', 'and', '', '', '', '', '', '')
  • toxicpioner | Убираем xfsearch из адресной строки 7
    Фото toxicpioner
    toxicpioner
    Убираем xfsearch из адресной строки
    15-12-2024, 19:31
    если в доп поле есть пробел, будет выдавать просто 403 стр
  • dj-avtosh | Воспользовался хаком удаление html из ад ... 2
    Фото dj-avtosh
    dj-avtosh
    Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
    12-12-2024, 17:26
    Нужно правило с year поднять выше всех в .htaccess
  • TeraMoune | Воспользовался хаком удаление html из ад ... 2
    Фото TeraMoune
    TeraMoune
    Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
    11-12-2024, 22:12
    У вас убрано слишком много отличительных признаков в ссылках и теперь ссылки пересекаются. Убрали xfsearch, убрали html, а так же зачем то убрали дефиз разделяющий id и alt_name. Теперь некоторые ссылки будут отвечать выражению под правила ссылок новостей. Исправить вы можете только переосмыслив эти ссылки и добавить в них каких-то отличительных особенностей, переосмыслить чпу.
  • toxicpioner | Как упорядочить ID новостей 19
    Фото toxicpioner
    toxicpioner
    Как упорядочить ID новостей
    9-12-2024, 22:24
    ***Комментарий удален***
  • DnCnv | Как показать только одну категорию, к ко ... 1
    Фото DnCnv
    DnCnv
    Как показать только одну категорию, к которой принадлежит новость?
    9-12-2024, 01:46
    ***Комментарий удален***
  • web102 | Почему не отображается картинка в галере ... 3
    Фото web102
    web102
    Почему не отображается картинка в галерее?
    4-12-2024, 11:49
    дайте адрес сайта. можно в личку
  • Shandi | Почему не отображается картинка в галере ... 3
    Фото Shandi
    Shandi
    Почему не отображается картинка в галерее?
    3-12-2024, 08:53
    Мне как ламеру ничего не понятно:( Кто-то это исправляет за денужку?
наверх