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

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


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

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

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

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

наверх