Как получить всплывающее окно с непрозрачностью в фоновом режиме, как это?

Question

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

Изображение http://img714.imageshack.us/img714/1592/gggggol.jpg

Я хотел бы использовать аналогичную реализацию как: http://www.smartclient.com/?skin=Enterprise#modality Но я не мог понять, как это сделать.Может ли кто-нибудь помочь мне реализовать это?Я не мог найти, какой файл скачать отсюда: http://www.smartclient.com/product/download.jsp
Разве это не что-то вроде MooTools или фреймворка jQuery?Я не могу понять, какой файл включить из загруженной библиотеки.Кто-нибудь может предоставить мне пример кода HTML-страницы для этого?

Другое дело, я видел следующий код в их источнике:

            isc.IButton.create({
                ID: "touchButton",
                width: 120,
                title: "Touch This"
            });

            isc.Label.create({
                left: 150,
                height: 20,
                contents: "<a href='http://www.google.com' target='_blank'>Open Google</a>"
            });

            isc.IButton.create({
                title: "Show Window",
                top: 35,
                left: 75,
                click : function () {
                    touchButton.setTitle("Can't Touch This");
                    modalWindow.show();
                }
            });

            isc.Window.create({
                ID: "modalWindow",
                title: "Modal Window",
                autoSize:true,
                autoCenter: true,
                isModal: true,
                showModalMask: true,
                autoDraw: false,
                closeClick : function () { touchButton.setTitle('Touch This'); this.Super("closeClick", arguments)},
                items: [
                    isc.DynamicForm.create({
                        autoDraw: false,
                        height: 48,
                        padding:4,
                        fields: [
                                    {name: "field1", type: "select", valueMap: ["foo", "bar"]},
                                    {name: "field2", type: "date"},
                                    {type: "button", title: "Done",
                                     click: "modalWindow.hide();touchButton.setTitle('Touch This')" }
                                ]
                    })
                 ]
            });

Меня беспокоит следующий код:

            fields: [
                        {name: "field1", type: "select", valueMap: ["foo", "bar"]},
                        {name: "field2", type: "date"},
                        {type: "button", title: "Done",
                         click: "modalWindow.hide();touchButton.setTitle('Touch This')" }
                    ]

Может кто-нибудь сказать, пожалуйста, что это за код?Есть ли что-то подобное в MooTools или jQuery?Я отношусь к этим вещам.Пожалуйста помоги.Заранее спасибо.

Answer 1

smartclient - это собственная платформа RIA, код, который вы разместили, имеет собственный синтаксис.

код, который вы видите ниже:

fields: [
    {
        name: "field1",
        type: "select",
        valueMap: ["foo", "bar"]
    },
    {
        name: "field2",
        type: "date"
    },
    {
        type: "button",
        title: "Done",
        click: "modalWindow.hide();touchButton.setTitle('Touch This')"
    }
]

- это простое буквальное определение массива, где члены массива являются буквально определенными объектами. Это не относится только к mootools, jquery или любым другим фреймворкам, это просто javascript. Кроме того, прочитайте о JSON (нотация объектов javascript), по сути, транспортная форма выше.

что касается релизов, подобных пользовательскому интерфейсу mootools:

• mochaui. http://mochaui.org/demo/ - я бы немного подождал, они, скорее всего, выпустят новую революционную версию, которая приведет ее в соответствие с mootools 1.3 и исправит нагрузки.
• LSD - мини-интерфейс через mootools ART - https://github.com/Inviz/lsd#readme (один из многих, ожидайте что-то и от Cloudera, возможно)
• moolego ui - http://ui.moolego.org/ - похоже, застопорились - последний коммит на github сделан 11 месяцев назад.
• взгляните на кузницу mootools.
• сделай свой! очень легко в наши дни, особенно с html5

Answer 2

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

Теперь о коде: SmartClient построил все свои компоненты для поддержки форматов данных json / xml. Мы не обсуждаем xml (расширяемый язык разметки) здесь.

Теперь о json (нотация объектов javascript); Json - это очень простой и стандартный формат для изучения, если вы знаете JavaScript. Для передачи любой информации / параметров клиенту / серверу; как мы делаем в html ex. www.google.com?param=value; json разделяет каждый параметр (ключ) и значение двоеточием ":". Теперь, если вы видите код выше, тогда все атрибуты (параметры) и значения между любыми "{" и "}" представляют один JSON. Если фигурные скобки "{}" являются вложенными, то существуют вложенные jsons, а если jsons находятся между длинными скобками "[]", то это представляет массив json.

Ex. Если есть таблица любого объекта, скажем, пользователи, то его JSON будет [{user 1 json ...}, {user 1 json ...} и т. Д.]]

но если есть какая-либо одна HTML-форма (в SmartClient это DynamicForm), то достаточно одного json {form json со всеми полями ... }

Давайте еще раз вернемся к коду: самая первая строка isc.IButton.create - SmartClient относится к изоморфному (isc), поэтому любой компонент isc создается с использованием isc.COMPONENT.create ({}); между "({...})" вам нужно написать json, где width: 120 - это всего лишь json.

Любое событие, такое как click, closeClick в коде, является ничем иным, как анонимной функцией javascript, такой как mouseover в html.

В коде isc.Window.create есть вложение json и массива элементов json, а Window является специфическим компонентом SmartClient с заданными атрибутами.

Последний пример: если есть сущность User: имеет атрибуты rollNo как 1 и name: "no-name", тогда его json будет: {"user": {"rollNo": "1", "name": "no-name"}} или же {"rollNo": "1", "name": "no-name"}

и если таких пользователей два, [ {"rollNo": "1", "name": "no-name-1"}, {"rollNo": "2", "name": "no-name-2"} ]

И ответ на ваш вопрос о непрозрачности есть; используйте свойство ниже в компоненте окна: modalMaskOpacity: 50 Это свойство контролирует непрозрачность модальной маски, отображаемой за модальными окнами, и значение варьируется от 0 (прозрачный) до 100 (непрозрачный)

Спасибо shaILU

Answer 3

Для создания диалогов с помощью mootools вы можете использовать MooDialog

Answer 4

Если вы хотите создать модальное диалоговое окно, вы можете легко использовать Jquery UI Dialog и добавить свою форму в диалог.

Диалог пользовательского интерфейса Jquery