Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Модальные диалоги: проектирование / 24 сообщений из 24, страница 1 из 1
22.07.2013, 15:16
    #38339199
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
Добрый день!

стоит вопрос проектирования интерфейса в котором возможно вызов модального диалога из другого модального диалога и все это в пределе можно до +бесконечности

есть несколько вариантов реализации:
- создание слоя для модального диалога и отображение его поверх всех слоев (проблема вычисления z-Index в некоторых библиотеках разработчики любят баловаться приемами типа zIndex: 999999)
- все предыдущие слои делать невидимыми (тут все просто нужно лишь хранить стек вызова диалогов и отображать/скрывать нужное)

Поделитесь соображениями и опытом пожалуйста!
а может можно и без диалогов?...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 15:18
    #38339204
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
Я бы поговорил с тем, кто такую задачу поставил
Может, было бы лучше ее перформулировать
Отобразить в одном диалоге несколько чекбоксов например (возможно, пряча/показывая одни из них в зависимости от других etc)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 15:26
    #38339225
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
Паганель,

Поясню на примере:
в форме в поле нужно добавить устройство и в одном из полей устройства нужно выбрать данные из справочника (справочник ну просто большой и при этом предложение с подсказками типа автодополнения не катят - отбор сложный по нескольким полям) -> нужна форма выбора, далее в форме выбора обнаруживаем, что данного экземпляра нет - его надо создать: если закрыть форму поиска и открыть диалог создания - получается некошерно:
- во-первых мельтешение форм
- во-вторых выбиваем смыловой контекст у юзера

Ну потом в создаваемой форме вновь есть поле требующее таких действий и т.д. и т.п.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 15:34
    #38339244
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
что-то я не припоминаю сайтов, работающих с юзером таким образом
только десктопные приложения такие видел
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 15:35
    #38339245
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
тут так же подойдет пример какой-нибудь сущности с иерархической зависимостью подсущностей - у нас есть сущности с иерархической зависимостью подсущностей равной 5
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 15:35
    #38339246
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
Паганель,

это приложения работающие с БД
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 16:05
    #38339288
The_ShadoW
The_ShadoW
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
Паганельчто-то я не припоминаю сайтов, работающих с юзером таким образом
только десктопные приложения такие видел
Обычный rich web UI.

Топикстартеру: если у Вас слоёв и вправду будет до +бесконечности (теоретический программный максимум и практический реально нужный максимум -- это две большие разницы), то разумеется спасёт стопка невидимых слоёв, из которых демонстрируется нужный.

А 2-3-4-5 слоёв можно и друг поверх друга прорисовывать, но кроме визуальных "красивостей" практического смысла в этом всё равно особого нет.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 16:16
    #38339311
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
The_ShadoW,

ну про + бесконечность - это шутка юмора :)
на самом деле у 2го варианта тоже большой минус - ускользает контекст действия...
но в первом случае самая большая проблема определения текущего самого верхнего значения z-Index
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 16:24
    #38339328
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
The_ShadoWОбычный rich web UIпредоставьте, пожалуйста, ссылку на один из таких обычных сайтов
может, и автору пригодится (фаербагом ковырнуть например)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 16:27
    #38339334
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
Паганель,

Всякие разные CRM - ну вот первая которая попалась кудабы не плюнул Microsoft CRM
зарегистрируйтесь и поковыряйтесь
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 16:41
    #38339356
The_ShadoW
The_ShadoW
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
spно в первом случае самая большая проблема определения текущего самого верхнего значения z-Index
Не вижу проблем. Исключая случай "у меня какие-то неведомые библиотеки, которые выставляют какие-то загадочные z-index не так, как я сам хочу".

Тут только можно сказать что-то типа "не используйте библиотеки, которые не можете контролировать" :-)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 16:53
    #38339379
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
The_ShadoW,

я б не спешил с выводами))
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 16:55
    #38339384
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
The_ShadoW,

блин не на ту кнопку нажал...
интерфейс позволяет аналитику настраивать формы и там возможно шаманить с цсс и аналитик может впиндюрить zIndex начитавшись попсы про цсс - я исключить аналитика не могу!!! он нужен в работе!!))
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 16:56
    #38339388
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
эээ а что такое onmicrosoft.com ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 17:14
    #38339426
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
The_ShadoWspно в первом случае самая большая проблема определения текущего самого верхнего значения z-Index
Не вижу проблем.+1
Делал приложение, открывающее один модальный диалог из другого. Никаких сложностей не обнаружил.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 17:25
    #38339449
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
AntonariyДелал приложение, открывающее один модальный диалог из другого. Никаких сложностей не обнаружил.

сложности открыть диалог никакой - бери да открывай, но вопрос где он откроется и что увидит пользователь!?
некоторые умельцы в своих библиотеках любят направо и налево своим элементам присваивать zIndex типа 9999999, так не окажется ли такой элемент у вас в диалоге, вместо того чтобы быть под ним??
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 17:44
    #38339485
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
sp но вопрос где он откроется и что увидит пользователь!?Ты вслепую кодишь что ли?
Откроется там, где укажешь. Все диалоги имеют соответствующие параметры.

sp некоторые умельцы в своих библиотекахНу так не пользуйся ими.

spтак не окажется ли такой элемент у вас в диалоге, вместо того чтобы быть под ним??Если элемент в диалоге (диалог является контейнером элемента), то он не может оказаться под диалогом, какой z-index ему не ставь.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 19:14
    #38339625
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
<!DOCTYPE HTML>
<html>  
<head>
  <style>
    #dialog-background {
      background-color: #eee;
      bottom: 0;
      display: none;
      height: 100%;
      left: 0;
      opacity: .8;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
    }
    .dialog {
      background-color: #fff;
      border: solid 1px #000;
      height: 150px;
      position: absolute;
      width: 250px;
      z-index: 0;
    }
    .dialog#last-dialog {
      z-index: 2;
    }
    .dialog p {
      left: 8px;
      position: absolute;
      top: 8px;
      z-index: 99999;
    }
  </style>
</head>
<body>
  <div id="dialog-background"></div>
  <button onclick="openDialog()">Click Me</button>
  <script>
    function openDialog() {
      document.getElementById('dialog-background').style.display = 'block';

      var dialog = document.getElementById('last-dialog');

      if (dialog) {
        dialog.id = null;
      }

      dialog = document.createElement('DIV');
      dialog.className = 'dialog';
      dialog.id = 'last-dialog';
      dialog.innerHTML =
        '<p>' +
        'стоит вопрос проектирования интерфейса ' +
        'в котором возможно вызов модального диалога из другого модального диалога ' +
        'и все это в пределе можно до +бесконечности' +
        '</p>' +
        '<button onclick="openDialog()">Click Me</button>';
      dialog.style.left = Math.floor(Math.random() * 100) + 200 + 'px';
      dialog.style.top = Math.floor(Math.random() * 50) + 100 + 'px';

      document.body.appendChild(dialog);
    }
  </script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 20:50
    #38339701
The_ShadoW
The_ShadoW
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
spблин не на ту кнопку нажал...
интерфейс позволяет аналитику настраивать формы и там возможно шаманить с цсс и аналитик может впиндюрить zIndex начитавшись попсы про цсс - я исключить аналитика не могу!!! он нужен в работе!!))
Ну напишите в документации продукта, что при вхождении в настройки цсс кривоватых ручек аналитиков -- работоспособность не гарантируется. И делов.

Программная защита от дурака работает только до определенного предела, а дальше затраты на защиту становятся несоразмерны эффекту, и лучше бороться с дураками другими средствами. Например, административными.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2013, 22:34
    #38339768
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
skyANA,

спасибо за пример!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.07.2013, 08:22
    #38339897
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
sp, не за что. Надеюсь на z-index: 99999 обратили внимание, а то я забыл выделить.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.07.2013, 14:44
    #38340604
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
skyANA,

конечно обратил, за это и поблагодарил!)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.07.2013, 23:37
    #38341463
asws
asws
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
sp,

Тема очень интересная, занимаюсь ей несколько лет.
Как только не экспериментировал - пришёл к такому:
1. Так называемые "слои" - думаю в вашем случае независимые справочники - лучше сделать неперекрывающимися (по типу окон).
2. Отдельный слой/окно - отличается только тем, что полностью перекрывает всё остальное - для модальных диалогов.

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

Если интересно подробнее, напишите на asql - bk - ru, сообщив здесь дату-время отправки письма,
буду рад, поскольку наши интересы, видимо, совпадают.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.07.2013, 12:26
    #38341906
deblogger
deblogger
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Модальные диалоги: проектирование
Добавляйте breadcrumbs где-нибудь. App > Dialog1 > Dialog2 > Dialog3 > YouAreHere
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Модальные диалоги: проектирование / 24 сообщений из 24, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 381ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1448085]:
 0ms
get settings:
 10ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 56ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 34ms
get tp. blocked users:
 1ms
others: 252ms
total:  381ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]